fj-dc-ui/.svn/pristine/d4/d495d9752cc2d01fd94953628f30820eb5a0ec52.svn-base

<template>
	<!-- 弹出窗 -->
	<el-dialog title="添加督查对象" :visible.sync="dialogFormVisible" width="80%" modal-append-to-body append-to-body>
		<el-container>
			<el-aside width="200px" style="border:1px solid #d5d5ff">
				<p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">
					<i class="el-icon-share"></i>所属机构
				</p>
				<provTreeListQy
				ref="provTreeListQyRef"
                :ddczId='dczId'
                rootCode="000000"
                :adCodes="adCodes"
                rootType="1"
                style="max-height:485px;"
				v-show="showLeftTree"
					@treeDataEmit="treeDataEmit"
					@provTreeSelectChange="provTreeSelectChangeHandler_qy">

				</provTreeListQy>
				<provTreeList
				v-show="!showLeftTree"
					rootCode="000000"
					rootType="1"
					style="max-height:485px;"
					@provTreeSelectChange="provTreeSelectChangeHandler"
				></provTreeList>
			</el-aside>
			<el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
				<p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">督查对象</p>
				<el-form v-if="objType == '1' || objType == '36' || objType == '26' || objType == '34' || objType == '80' || objType == '106' || objType == '115'" style="padding:10px">
					<div>
						<el-form size="mini" :inline="true" class="demo-form-inline" style="display:none;">
							<el-form-item label="督查对象">
								<el-select style="width:150px;" v-model="objTypeName" placeholder="请选择" @change="selectChange">
									<el-option label="小水库" value="1"></el-option>
									<el-option label="农村饮水工程" value="2"></el-option>
									<el-option label="水毁" value="3"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<el-form size="mini" :inline="true" class="demo-form-inline">
                            <el-form-item label="是否已督查" v-if="objType == '1'">
                                <el-select style="width:100px;" v-model="hstInsp" clearable placeholder="请选择">
                                    <el-option label="否" value="0"></el-option>
                                    <el-option label="是" value="1"></el-option>
                                </el-select>
                            </el-form-item>
							<el-form-item label="工程规模">
								<el-select style="width:100px;" v-if="objType == '1' || objType == '106' || objType == '115'" v-model="engScal" clearable placeholder="请选择">
									<el-option label="小（1）型" value="4"></el-option>
									<el-option label="小（2）型" value="5"></el-option>
                  <el-option label="中型" value="3" v-if="isSc"></el-option>
								</el-select>
								<el-select style="width:100px;" v-if="objType == '36' || objType == '26'|| objType == '80'" v-model="engScal" clearable placeholder="请选择">
									<el-option label="大（1）型" value="1"></el-option>
									<el-option label="大（2）型" value="2"></el-option>
									<el-option label="中型" value="3"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="水库名称">
								<el-input
									style="width:140px;"
									v-model="searchNameOfRsName"
									clearable
									placeholder="请输入水库名称"
								></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="refreshCurrentShow">查询</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="toAddNewRsvr">添加新水库</el-button>
							</el-form-item>
              <el-form-item>
                <el-button type="primary" @click="importExcel" v-if="objType!='115'">全部导入</el-button>
              </el-form-item>
						</el-form>
						<el-table
							border
							v-loading="loading"
							:data="currentShowList"
							tooltip-effect="dark"
							style="width: 100%"
							@selection-change="handleSelectionChange"
						>
							<el-table-column align="center" type="selection" width="60"></el-table-column>
							<el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="rsName"
								label="水库名称"
								min-width="100"
							></el-table-column>
							<el-table-column
                                v-if="objType != '26'"
								align="center"
								show-overflow-tooltip
								prop="location"
								label="行政区划"
								min-width="100"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="engScal"
								label="工程规模"
								:formatter="engScalFormatter"
								min-width="80"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="rsAdmDep"
								label="归口管理部门"
								:formatter="rsAdmDepFormatter"
								min-width="100"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="totCap"
								label="总库容"
								min-width="100"
							></el-table-column>
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="hstInsp"
                label="是否督查"
                min-width="80"
              >
                <template slot-scope="scope">
                    <span v-if="scope.row.hstInsp=='1'">是</span>
                    <span v-if="scope.row.hstInsp=='0' || scope.row.hstInsp==null || scope.row.hstInsp==''">否</span>
                </template>
              </el-table-column>
						</el-table>
						<div
							class="block"
							style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;"
						>
							<el-pagination
								small
      							@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:pager-count="5"
								:current-page.sync="pageIndex"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next"
								:total="total"
							></el-pagination>
						</div>
					</div>
					<!-- </el-form-item> -->
				</el-form>
				<el-form v-if="objType == '2'" style="padding:10px">
					<div>
						<el-form size="mini" :inline="true" class="demo-form-inline"  style="display:none;">
							<el-form-item label="督查对象">
								<el-select style="width:150px;" v-model="objTypeName" placeholder="请选择" @change="selectChange">
									<el-option label="小水库" value="1"></el-option>
									<el-option label="农村饮水工程" value="2"></el-option>
									<el-option label="水毁" value="3"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<el-form size="mini" :inline="true" class="demo-form-inline">
							<el-form-item label="行政区名称">
								<el-input
									style="width:140px;"
									v-model="searchNameOfAdName"
									clearable
									placeholder="请输入行政区名称"
								></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="getTableData">查询</el-button>
							</el-form-item>
						</el-form>
						<el-table
							border
							:data="currentShowList"
							tooltip-effect="dark"
							style="width: 100%"
							@selection-change="handleSelectionChange"
						>
							<el-table-column align="center" type="selection" width="60"></el-table-column>
							<el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="adName"
								label="行政区划名称"
								min-width="100"
									:formatter="adNameFormatter"
							>
							</el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="adFullName"
								label="全称"
								min-width="100"
								:formatter="adFullNameFormatter"
							>
							</el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="adCode"
								label="行政区划编码"
								min-width="100"
								:formatter="adCodeFormatter"
							>
							</el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="adGrad"
								label="行政区划级别"
								min-width="100"
								:formatter="adGradFormatter"
							></el-table-column>
							<!-- <el-table-column align="center" show-overflow-tooltip prop="adArea" label="面积" min-width="100"></el-table-column> -->
						</el-table>
						<div
							class="block"
							style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;"
						>
							<el-pagination
								small
      							@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:pager-count="5"
								:current-page.sync="pageIndex"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, prev, pager, next"
								:total="total"
							></el-pagination>
						</div>
					</div>
					<!-- </el-form-item> -->
				</el-form>
				<el-form v-if="objType == '3'" style="padding:10px">
					<div>
						<el-form size="mini" :inline="true" class="demo-form-inline"  style="display:none;">
							<el-form-item label="督查对象">
								<el-select style="width:150px;" v-model="objTypeName" placeholder="请选择" @change="selectChange">
									<el-option label="小水库" value="1"></el-option>
									<el-option label="农村饮水工程" value="2"></el-option>
									<el-option label="水毁" value="3"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
						<el-form size="mini" :inline="true" class="demo-form-inline">
							<el-form-item label="工程类别">
								<el-input style="width:130px;" v-model="wtdstType" clearable placeholder="请输入工程类别"></el-input>
							</el-form-item>
							<el-form-item label="修复状态">
								<el-select style="width:85px;" v-model="wtdstState" clearable placeholder="请选择">
									<el-option label="已修复" value="1"></el-option>
									<el-option label="未修复" value="0"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="项目名称">
								<el-input
									style="width:130px;"
									v-model="searchNameOfwtdstNm"
									clearable
									placeholder="请输入项目名称"
								></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="getTableData">查询</el-button>
                <el-button type="primary" @click="addShuiHuiVisible=true">新增</el-button>
							</el-form-item>
						</el-form>
						<el-table
							border
							:data="currentShowList"
							tooltip-effect="dark"
							style="width: 100%"
							@selection-change="handleSelectionChange"
						>
							<el-table-column align="center" type="selection" width="60"></el-table-column>
							<el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="wtdstNm"
								label="项目名称"
								min-width="100"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="locNm"
								label="项目所在位置"
								min-width="100"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								:formatter="wtdstStateFormatter"
								prop="wtdstState"
								label="修复状态"
								min-width="100"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="wtdstType"
								label="工程类别"
								min-width="100"
							></el-table-column>
						</el-table>
						<div
							class="block"
							style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;"
						>
							<el-pagination
								small
      							@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:pager-count="5"
								:current-page.sync="pageIndex"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, prev, pager, next"
								:total="total"
							></el-pagination>
						</div>
					</div>
					<!-- </el-form-item> -->
				</el-form>
				<el-form v-if="objType == '5'" style="padding:10px">
					<div>
						<el-form size="mini" :inline="true" class="demo-form-inline">
							<el-form-item label="测站名称">
								<el-input style="width:130px;" v-model="stnm" clearable placeholder="请输入测站名称"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="refreshCurrentShow">查询</el-button>
							</el-form-item>
						</el-form>
						<el-table
							border
							:data="currentShowList"
							tooltip-effect="dark"
							style="width: 100%"
							@selection-change="handleSelectionChange"
						>
							<el-table-column align="center" type="selection" width="60"></el-table-column>
							<el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="stnm"
								label="测站名称"
								min-width="100"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="stcd"
								label="测站编码"
								min-width="100"
							></el-table-column>
							<el-table-column
								align="center"
								show-overflow-tooltip
								prop="adnm"
								label="所属行政区"
								min-width="100"
							></el-table-column>
						</el-table>
						<div
							class="block"
							style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;"
						>
							<el-pagination
								small
      							@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:pager-count="5"
								:current-page.sync="pageIndex"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, prev, pager, next"
								:total="total"
							></el-pagination>
						</div>
					</div>
					<!-- </el-form-item> -->
				</el-form>
			</el-main>
		</el-container>
		<el-dialog title="添加新水库" :visible.sync="addRsvrVisible" append-to-body>
			<el-form label-width="120px" :model="formObj" :rules="rules" ref="formObj">
				<el-form-item label="水库名称" required >
					<el-input v-model="formObj.rsName" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="管理机构" required >
					<el-input v-model="formObj.rsAdmName" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="行政区域" required>
					<!-- <el-select v-model="formObj.location" placeholder="请选择">
						<el-option
							v-for="item in areasList"
							:key="item.value"
							:label="item.adName"
							:value="item.adName">
						</el-option>
					</el-select> -->
					<div>
						<el-select v-model="provName" placeholder="选择省" @change="provChange" style="width:20%">
							<el-option
								v-for="item in provList"
								:key="item.adCode"
								:label="item.adName"
								:value="item.adCode">
							</el-option>
						</el-select>
						<el-select v-model="cityName" placeholder="选择市" @change="cityChange" style="width:20%">
							<el-option
								v-for="item in cityList"
								:key="item.adCode"
								:label="item.adName"
								:value="item.adCode">
							</el-option>
						</el-select>
						<el-select v-model="countryName" placeholder="选择县" @change="countryChange" style="width:20%">
							<el-option
								v-for="item in countryList"
								:key="item.adCode"
								:label="item.adName"
								:value="item.adCode">
							</el-option>
						</el-select>
					</div>
					<!-- <el-cascader
						:options="initLoacData"
						@active-item-change="handleItemChange"
						:props="props"
						v-model="formObj.location"
						style="width:70%;">
					</el-cascader> -->
				</el-form-item>
				<el-form-item label="所在地点" required >
					<el-input v-model="formObj.rsLoc" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="建成时间" required >
						<el-date-picker v-model="formObj.compDateStr" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
						</el-date-picker>
				</el-form-item>
				<el-form-item label="工程规模" required>
					<el-select v-model="formObj.engScal"  placeholder="请选择">
							<el-option v-for="item in gongchengguimo" :key="item.value" :label="item.label" :value="item.value"></el-option>
              <el-option label="中型" value="3" v-if="isSc"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="总库容(万m³)">
					<el-input v-model="formObj.totCap" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="最大坝高(m)">
					<el-input v-model="formObj.damSizeHig" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="主坝坝型">
					<el-select v-model="formObj.damType"  placeholder="请选择">
							<el-option v-for="item in zhubaleixing" :key="item.value" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="正常蓄水位" prop="normz">
          <el-input v-model="formObj.normz" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
        <el-form-item label="汛限水位" prop="fsltdz">
          <el-input v-model="formObj.fsltdz" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
				<el-form-item label="注册登记号">
						<el-input v-model="formObj.regCode" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="经度">
						<el-input v-model="formObj.longitude" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
				<el-form-item label="纬度">
						<el-input v-model="formObj.latitude" autocomplete="off" style="width:70%;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addRsvrVisible = false">取 消</el-button>
				<el-button type="primary" @click="addNewRsvr('formObj')">确 定</el-button>
			</div>
		</el-dialog>
    <el-dialog title="添加新对象" :visible.sync="addShuiHuiVisible" append-to-body>
      <el-form label-width="120px"  ref="formObj1">
        <el-form-item label="项目名称" required >
          <el-input v-model="formObj1.wtdstNm" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
        <el-form-item label="项目类别" required >
          <el-input v-model="formObj1.wtdstType" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
        <el-form-item label="项目进度" required>
          <el-select v-model="formObj1.wtdstState" placeholder="请选择" style="width:70%;">
            <el-option
              v-for="item in TrackProgress"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行政区域" required>
          <div>
            <el-select v-model="provName" placeholder="选择省" @change="provChange" style="width:20%">
              <el-option
                v-for="item in provList"
                :key="item.adCode"
                :label="item.adName"
                :value="item.adCode">
              </el-option>
            </el-select>
            <el-select v-model="cityName" placeholder="选择市" @change="cityChange" style="width:20%">
              <el-option
                v-for="item in cityList"
                :key="item.adCode"
                :label="item.adName"
                :value="item.adCode">
              </el-option>
            </el-select>
            <el-select v-model="countryName" placeholder="选择县" @change="countryChange" style="width:20%">
              <el-option
                v-for="item in countryList"
                :key="item.adCode"
                :label="item.adName"
                :value="item.adCode">
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="所在地点"  >
          <el-input v-model="formObj1.locNm" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
        <el-form-item label="水毁情况"  >
          <el-input v-model="formObj1.wtdstDtle" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="formObj1.wtdstLgtd" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="formObj1.wtdstLttd" autocomplete="off" style="width:70%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShuiHuiVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNewShuiHui">确 定</el-button>
      </div>
    </el-dialog>

		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" :loading="addOnce" :disabled="addOnce" @click="saveChange">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import request from '../../utils/gw_ajax_request.js';
import provTreeList from "../../widgets/provTreeList.vue";
// import provTreeListQy from "../../widgets/provTreeList_quyu.vue"
import {
	getObjListNotInspGroupId,
	addDcAndObjRel
} from "../../api/duChaDuiXiang_xsk_API.js";
export default {
	components: {
		provTreeList: provTreeList,
		provTreeListQy:resolve => {require(['../../widgets/provTreeList_quyu.vue'],resolve)},
	},
	props: ["dczId", "dczName", "plnaId", "objType","pType","adCodes","isNewPlan","rowData","isNew"],
	data() {
		return {
			addOnce:false,
			objTypeName:'小水库',
			xsk: true,
			ncys: false,
			shgc: false,
			dxs:false,
			searchNameOfRsName: "",
			searchNameOfAdName: "",
			searchNameOfwtdstNm: "",
			addLevel: "",
			rsAdmDep: "",
			engScal: "",
            hstInsp: "0",
            wtdstState: "",
			engLevel: "",
			wtdstType: "",
			stnm:'',
			pageIndex: 1,
			pageSize: 10,
			total: 0,
			currentShowList: [],
			dialogFormVisible: false,
			formLabelWidth: "120",
			addArr: "",
			addName:"",
			addLttd:"",
			addLgtd:"",
      addprovincial:"",
			multipleSelection: [],
			searchProvTreeListCode: "",
			qyDataList:[],
			loading:false,
			showLeftTree:true,
			addRsvrVisible: false,
      addShuiHuiVisible: false,
      TrackProgress: [
          {
              label: '待开工',
              value: '2',
          },
          {
              label: '正修复',
              value: '1',
          },
          {
              label: '已修复',
              value: '0',
          },
      ],
			formObj: {
				"rsName": '',
				"rsAdmName": "",
				"rsLoc": "",
				"location": '',
				"intm": "",
				"engScal": "",
				"totCap": "",
				"damMaxHigh": "",
				"damTypeStr": "",
				"rsType":'',
        "damType":"",
				"regCode": "",
				"rsvrLong": "",
				"rsvrLat": "",
				"compDate": "",
        "compDateStr":"",
				"admDiv": "",
				"longitude": "",
				"latitude": "",
				"centerXGd": "",
				"centerYGd": "",
        "normz":"",
        "fsltdz":""

			},
      formObj1:{
          wtdstNm: '',
          wtdstType: '',
          locNm: '',
          wtdstDtle: '',
          wtdstState: '',
          locAd:"",
          wtdstLgtd:"",
          wtdstLttd:""
      },
			areasList:[],
			gongchengguimo: [],
			xskEngscale:[
				{
					value: "4",
					label: "小（1）型"
				},
				{
					value: "5",
					label: "小（2）型"
				}
			],
			dskEngscale:[
				{
					value: "1",
					label: "大（1）型"
				},
				{
					value: "2",
					label: "大（2）型"
				},
				{
					value: "3",
					label: "中型"
				}
			],
			zhubaleixing:[
					{
					value: "1",
					label: "混凝土坝"
				},
					{
					value: "2",
					label: "碾压混凝土坝"
				},
					{
					value: "3",
					label: "浆砌石坝"
				},
				{
					value: "4",
					label: "土坝"
				},
				{
					value: "5",
					label: "堆石坝"
				},
				{
					value: "6",
					label: "挡水坝"
				},
				{
					value: "7",
					label: "其他"
				}
			],
			initLoacData: [{
					label: '江苏',
					cities: []
				}, {
					label: '浙江',
					cities: []
				}],
			props: {
					value: 'id',
					label: 'label',
					children: 'cities'
			},
			rules: {
				rsName: [
					{ required: true, message: '请输入水库名称', trigger: 'blur' },
				],
				rsAdmName: [
					{ required: true, message: '请输入管理单位', trigger: 'blur' }
				],
				// location: [
				//   { required: true, message: '请选择所在地', trigger: 'blur' }
				// ],
				compDate: [
					{ required: true, message: '请选择完成时间', trigger: 'blur' }
				]
			},
			provList: [],
			cityList: [],
			countryList: [],
			provName: '',
			cityName: '',
			countryName: '',
			provNames: '',
			cityNames: '',
			countryNames: '',
			curSelectItem: 0,
      importParam:{}
		}
	},
	watch: {
		dczId: function(n, o) {
			this.searchProvTreeListCode = "";
		},
		objType: function(n, o) {
			this.searchProvTreeListCode = "";
			this.objType = n;
			if(this.objType == "1" || this.objType == '36' || this.objType == '26' || this.objType == "34" || this.objType == '80' || this.objType == "106" || this.objType == "115") {
				this.getTableData_sk();
				this.getAreaList();
        this.getEngscale();
			}else if (this.objType == "2") {
				this.getTableData();
			}else if (this.objType == "3") {
				this.getTableData();
			}else if(this.objType == '5'){
				this.getTableData_dxs(n);
			}
		},
		qyDataList(n,o){
			if(this.qyDataList.length == 0){
				this.showLeftTree = false;
			}else{
				this.showLeftTree = true;
			}
			console.log("区域树"+n.length+this.showLeftTree+this.objType);
			if(this.objType == '1' || this.objType == '36' || this.objType == '106' || this.objType == "115"){
				this.getTableData_sk();
				this.getAreaList()
			}else if(this.objType == '5'){
				this.getTableData_dxs();
			}
		}
	},
  computed:{
      userId(){
          return localStorage.getItem("userid")? localStorage.getItem("userid"): '1098101939614724096'
      },
      isSc(){
          if(localStorage.getItem('currentRlcode').substring(0,2)=="51"){
              return true;
          }else{
              return false;
          }
      }
  },
	mounted() {
		if(this.objType == 1 || this.objType == 106 || this.objType == 115){
			this.gongchengguimo = this.xskEngscale
		}else if(this.objType == 36 || this.objType == 26 || this.objType == 80){
			this.gongchengguimo = this.dskEngscale
		}
	},

	methods: {
	  getEngscale(){
        if(this.objType == 1 || this.objType == 115){
            this.gongchengguimo = this.xskEngscale
        }else if(this.objType == 36 || this.objType == 26 || this.objType == 80){
            this.gongchengguimo = this.dskEngscale
        }
    },
    importExcel(){
        var _self = this;
        this.$confirm('确认要全部导入？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            _self.importParam.isSupn = _self.importParam.hstInsp;
            _self.importParam.inspGroupId = _self.dczId;
            _self.importParam.objType = _self.objType;
            _self.importParam.nm = _self.importParam.rsName;
            _self.importParam.adCode = _self.importParam.adcd;
            request.post('/supervision/plan/insertAllObj', _self.importParam).then((res) => {
                if (res.success) {
                    if(res.data.key){
                        _self.$message.success("未搜索到可添加的督察对象");
                    }else{
                        _self.dialogFormVisible = false;
                        _self.$message.success("导入成功");
                        _self.$emit("addSuccess");
                        _self.importParam = {};
                    }
                }else {
                    _self.$message.error("导入失败");
                }
            });
        })
    },
		changeCurrentObjSelectName(item){
			this.objType = item;
		},
		selectChange(val){
			console.log(val);
			this.objType = val;
		},
		engScalFormatter(row, column) {
			if(row.engScal == 1){
				return '大（1）型'
			}else if(row.engScal == 2){
				return '大（2）型'
			}else if(row.engScal == 3){
				return '中型'
			}else if(row.engScal == 4){
				return '小（1）型'
			}else if(row.engScal == 5){
				return '小（2）型'
			}else{
				return ''
			}
		},
		wtdstStateFormatter(row, column) {
			return row.wtdstState == 1 ? "已修复" : "未修复";
		},
		rsAdmDepFormatter(row, column) {
			return row.rsAdmDep == 1
				? "水利部门"
				: row.rsAdmDep == 2
				? "电力部门"
				: row.rsAdmDep == 3
				? "农业部门"
				: row.rsAdmDep == 4
				? "林业部门"
				: row.rsAdmDep == 5
				? "城建部门"
				: row.rsAdmDep == 6
				? "航运部门"
				: row.rsAdmDep == 7
				? "环保部门"
				: "其他部门";
		},
		adGradFormatter(row, column) {
			return row.adGrad == 1
				? "国家级"
				: row.adGrad == 2
				? "省级"
				: row.adGrad == 3
				? "地市级"
				: row.adGrad == 4
				? "县级"
				: row.adGrad == 5
				? "乡级"
				: row.adGrad == 6
				? "村"
				: "村组";
		},
		adNameFormatter(row,column){
			return row.adName;
		},
		adFullNameFormatter(row,column){
			return row.adFullName;
		},
		adCodeFormatter(row,column){
			return row.adCode;
		},
		showDialog(tableCurrentRowType = null,yqList) {
			this.tableCurrentRowType = tableCurrentRowType;
			this.dialogFormVisible = true;
      this.getAreaList();
			let _self = this;
			if (this.tableCurrentRowType == "1" || this.tableCurrentRowType == '36' || this.tableCurrentRowType == '34' || this.tableCurrentRowType == '80' || this.tableCurrentRowType == '106') {
				// this.getTableData_sk();
				this.xsk = true;
				this.ncys = false;
				this.shgc = false;
				this.dxs = false;
				// this.getAreaList()
			} else if (this.tableCurrentRowType == "2") {
				// this.getTableData();
				this.xsk = false;
				this.ncys = true;
				this.shgc = false;
				this.dxs = false;
			} else if (this.tableCurrentRowType == "3"){
				// this.getTableData();
				this.xsk = false;
				this.ncys = false;
				this.shgc = true;
				this.dxs = false;
			}else {
				this.xsk = false;
					this.ncys = false;
					this.shgc = false;
					this.dxs = true;
			}

			let markObjType = tableCurrentRowType?tableCurrentRowType:this.objType;//添加额外参数规避watch的先后执行问题
			// if((markObjType=='1' || markObjType=='36' || markObjType=='5') && this.showLeftTree){
        this.showLeftTree = true;
				console.log(this.$refs.provTreeListQyRef)
				this.$refs['provTreeListQyRef'].getQyList();
			// }
			if(markObjType == '1' || markObjType=='36' || markObjType=='26' || markObjType=='34' || markObjType=='80' || markObjType == '106' || markObjType == "115"){
				this.getTableData_sk();
			}else if(markObjType == '2' ||markObjType == '3'){
				// if(this.qyDataList && this.qyDataList.length==0){
					if(yqList && yqList.length){
						_self.qyDataList = [];
						yqList.forEach((item)=>{
							_self.qyDataList.push(item);
						});
					}
				// }
				this.getTableData();
			}else{
				this.getTableData_dxs();
			}
		},
		saveChange() {
			this.addObjectChange();
		},
		treeDataEmit(item){
			this.qyDataList = item;
			if(this.qyDataList.length == 0){
				this.showLeftTree = false;
			}else{
				this.showLeftTree = true;
			}
		},
		getTableData_dxs(){
			var _self = this;
			if(_self.qyDataList.length == 0){
				_self.showLeftTree = false;
			}else{
				_self.showLeftTree = true;
			}
			_self.loading = true;
			var str = '';
			for(var i=0;i<_self.qyDataList.length;i++){
				str+= _self.qyDataList[i].adCode+',';
			}
			str = str.substring(0,str.length-1)
			var obj = {
					"adcd": str,
					"adnm":'',
					"groupId": _self.dczId,
					"stcd": '',
					"stnm":_self.stnm,
					"sttp":'',
					"pageNum":_self.pageIndex,
					"pageSize":_self.pageSize
				}
			request.post('/dc/insp/obj/getGrwNotInGroup',obj).then((res)=>{
				_self.loading = false;
					_self.currentShowList = res.data.list;
					_self.currentShowList.forEach((element, index) => {
						element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
					});
					_self.total = res.data.total;
			})
		},
		getTableData_sk(){
			var _self = this;
			if(_self.qyDataList.length == 0){
				_self.showLeftTree = false;
			}else{
				_self.showLeftTree = true;
			}
			_self.loading = true;
			var str = '';
			for(var i=0;i<_self.qyDataList.length;i++){
				str+= _self.qyDataList[i].adCode+',';
			}
			str = str.substring(0,str.length-1);
			var obj = {
					"adcd": str,
					"rsName": _self.searchNameOfRsName,
					"engScal": _self.engScal,
					"id": _self.userId,
					"groupId":_self.dczId,
					"pageNum":_self.pageIndex,
					"pageSize":_self.pageSize,
					"pType": _self.objType,
                    "hstInsp": _self.hstInsp
				}
				_self.importParam = obj;
			// request.post('/dc/insp/selarea/getResByArea',obj).then((res)=>{
			//   _self.loading = false;
			//     _self.currentShowList = res.data.list;
			//     _self.currentShowList.forEach((element, index) => {
			//       element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
			//     });
			//     _self.total = res.data.total;
			// })
			request.post('/dc/insp/selarea/getResByGroup',obj).then((res)=>{
				_self.loading = false;
					_self.currentShowList = res.data.list;
					_self.currentShowList.forEach((element, index) => {
						element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
					});
					_self.total = res.data.total;
			})
		},
		getTableData: function(callBackFunction = null) {
			var _self = this;
			if (!this.dczId) {
				// this.dczId = 'jwW2Wihf5E9X3UC9t45fmSHyffUs2rzI';
			}
			if(_self.objType == '1' || _self.objType == '36' || _self.objType == "5"|| this.objType == '26' || _self.objType == "34" || _self.objType == "106" || _self.objType == "115"){
				return;
			}
			let str = '';
			for(var i=0;i<_self.qyDataList.length;i++){
				str+= _self.qyDataList[i].adCode+',';
			}
			str = str.substring(0,str.length-1);
			getObjListNotInspGroupId(
				this.dczId,
				this.objType,
				this.pageSize,
				this.pageIndex,
				this.searchNameOfRsName, //水库名称
				this.searchNameOfAdName, //农村饮水行政区划名称
				this.searchNameOfwtdstNm, //水毁工程名称
				this.engScal, //水库-工程规模
				this.rsAdmDep, //水库-归口管理部门
				this.wtdstType, //水毁-工程类别
				this.wtdstState, //水毁-修复状态
				this.searchProvTreeListCode==''?str:this.searchProvTreeListCode,
			).then(
				res => {
					_self.currentShowList = [];
					res.data.list.forEach((element,index) =>{
						element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
						_self.currentShowList.push(element);
					});
					console.log(	_self.currentShowList);
					_self.total = res.data.total;
					if(callBackFunction&&typeof(callBackFunction)=='function'){
						callBackFunction();
					}
				},
				err => {
					console.log("查询错误");
					if(callBackFunction&&typeof(callBackFunction)=='function'){
						callBackFunction();
					}
				}
			);
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		handleCurrentChange(val) {
			this.refreshCurrentShow();
		},
		handleSizeChange(val){
			this.pageSize = val
			this.refreshCurrentShow();
		},
		refreshCurrentShow: function() {
			if(this.objType == '1' || this.objType == '36'|| this.objType == '26' || this.objType == '34' || this.objType == '80' || this.objType == '106' || this.objType == "115"){
				if(this.searchProvTreeListCode){
					this.getTableData_sk1();
				}else{
					this.getTableData_sk();
				}
			}else if(this.objType == '2' || this.objType == '3'){
				this.getTableData();
			}else{
				this.getTableData_dxs();
			}
		},

		addObjectChange: function() {
      var objArr1 = [];
      var objIds1 = [];
			//提交当前选中对象
			var _self = this;
			var names = [];
      var objNew = {};
			if(_self.addOnce){
				_self.addOnce = false;
				return;
			}
			_self.addOnce = true
			_self.addArr = '';
			_self.addName = '';
			_self.addLttd = '';
			_self.addLgtd = '';
      _self.addprovincial = '';
			const length = _self.multipleSelection.length;
			if (this.objType == "1" || this.objType == "36" || this.objType == "26" || this.objType == "34" || this.objType == '106' || this.objType == "115") {
				for (let i = 0; i < length; i++) {
					_self.addArr += _self.multipleSelection[i].rsCode + ",";
					_self.addName += _self.multipleSelection[i].rsName + ",";
					_self.addLttd += _self.multipleSelection[i].latitude + ",";
					_self.addLgtd += _self.multipleSelection[i].longitude + ",";
          _self.addprovincial += _self.multipleSelection[i].provincial + ",";
          names.push(_self.multipleSelection[i].rsName);
          var obj1 = {}
          obj1['code'] = _self.multipleSelection[i].rsCode;
          obj1['name'] = _self.multipleSelection[i].rsName;
          obj1['ptype'] = this.objType;
          objArr1.push(obj1);
          objIds1.push(_self.multipleSelection[i].rsCode);
				}
			} else if (this.objType == "2") {
				for (let i = 0; i < length; i++) {
					_self.addArr += _self.multipleSelection[i].adCode + ",";
					_self.addName += _self.multipleSelection[i].adName + ",";
					_self.addLttd += _self.multipleSelection[i].lttd + ",";
					_self.addLgtd += _self.multipleSelection[i].lgtd + ",";
          names.push(_self.multipleSelection[i].adName);
          var obj1 = {}
          obj1['code'] = _self.multipleSelection[i].adCode;
          obj1['name'] = _self.multipleSelection[i].adName;
          obj1['ptype'] = this.objType;
          objArr1.push(obj1);
          objIds1.push(_self.multipleSelection[i].adCode);
				}
			} else if (this.objType == "3"){
				for (let i = 0; i < length; i++) {
					_self.addArr += _self.multipleSelection[i].wtdstId + ",";
					_self.addName += _self.multipleSelection[i].wtdstNm + ",";
					_self.addLttd += _self.multipleSelection[i].wtdstLttd + ",";
					_self.addLgtd += _self.multipleSelection[i].wtdstLgtd + ",";
          _self.addprovincial += _self.multipleSelection[i].provincial + ",";
         names.push(_self.multipleSelection[i].wtdstNm);
          var obj1 = {}
          obj1['code'] = _self.multipleSelection[i].wtdstId;
          obj1['name'] = _self.multipleSelection[i].wtdstNm;
          obj1['ptype'] = this.objType;
          objArr1.push(obj1);
          objIds1.push(_self.multipleSelection[i].wtdstId);
				}
			} else if (this.objType == "5"){
				for (let i = 0; i < length; i++) {
					_self.addArr += _self.multipleSelection[i].stcd + ",";
					_self.addName += _self.multipleSelection[i].stnm + ",";
					_self.addLttd += _self.multipleSelection[i].lttd + ",";
					_self.addLgtd += _self.multipleSelection[i].lgtd + ",";
          names.push(_self.multipleSelection[i].stnm);
            var obj1 = {}
            obj1['code'] = _self.multipleSelection[i].stcd;
            obj1['name'] = _self.multipleSelection[i].stnm;
            obj1['ptype'] = this.objType;
            objArr1.push(obj1);
            objIds1.push(_self.multipleSelection[i].stcd);
				}
			}

			_self.addArr = _self.addArr.substr(0, _self.addArr.length - 1);
			_self.addName = _self.addName.substr(0, _self.addName.length - 1);
			_self.addLttd = _self.addLttd.substr(0, _self.addLttd.length - 1);
			_self.addLgtd = _self.addLgtd.substr(0, _self.addLgtd.length - 1);
      _self.addprovincial = _self.addprovincial.substr(0, _self.addprovincial.length - 1);
			console.log(_self.addArr);
      if (this.objType == "80"){
        var objArr = [];
        var objIds = [];
        const length = _self.multipleSelection.length;
        for (let i = 0; i < length; i++) {
          var obj = {};
          obj['code'] = _self.multipleSelection[i].rsCode;
          obj['name'] = _self.multipleSelection[i].rsName;
          obj['ptype'] = this.objType;
          objArr.push(obj);
          objIds.push(_self.multipleSelection[i].rsCode);
          names.push(_self.multipleSelection[i].rsName);
        }
        let obj = {
          persid :this.userId,
          nm: this.dczName,
          id: this.dczId,
          persAllAreaDtoList: [],
          persAllDtoList: [],
          persAllObjDtoList: objArr
        };
        if(this.isNewPlan){
           this.addOnce = false;
           this.dialogFormVisible = false;
           this.$message.success("选择成功");
           this.$emit("addSuccess",{obj:obj,names:names.join(",")});
           return;
        }
        request.post("/supervision/plan/insertSupervisionObj",obj).then(response => {
          if (response.success == true) {
              if(this.isNew){
                  _self.addOnce = false;
                  _self.$message.success("添加成功");
                  _self.$emit('addSuccess',{listArr:objArr,listIds:objIds});
                  _self.dialogFormVisible = false;
              }else{
                  _self.addOnce = false;
                  _self.dialogFormVisible = false;
                  _self.$message.success("添加成功");
                  _self.$emit("addSuccess");
              }
          }
        });
        return;
      }
      var obj = {
          addArr: _self.addArr,
          addName:_self.addName,
          addLttd:_self.addLttd,
          addLgtd:_self.addLgtd,
          objType:_self.objType,
          dczId:_self.dczId,
          plnaId:_self.plnaId,
          plnaId:_self.plnaId,
      }
      if(this.isNewPlan){
          this.addOnce = false;
          this.dialogFormVisible = false;
          this.$message.success("选择成功");
          this.$emit("addSuccess",{obj:obj,names:names.join(",")});
          this.addArr = "";
          return;
      }
			try {
				// inspGroupId,objId,objType,plnaId
				let objType = _self.objType
				addDcAndObjRel(
					_self.addArr,
					_self.addName,
					_self.addLttd,
					_self.addLgtd,
					objType,
					_self.dczId,
					_self.plnaId,
					_self.plnaId,
          _self.addprovincial
				).then(response => {
					if (response.success == true) {
              if(this.isNew){
                  _self.addOnce = false;
                  _self.$message.success("添加成功");
                  _self.$emit('addSuccess',{listArr:objArr1,listIds:objIds1});
                  _self.dialogFormVisible = false;
              }else{
                  _self.addOnce = false;
                  this.dialogFormVisible = false;
                  // this.getTableData();
                  this.$message.success("添加成功");
                  this.$emit("addSuccess");
                  // _self.dczId = "";
                  _self.addArr = "";
              }
					}
				});
			} catch (e) {
				alert("暂无数据");
			}
		},
		provTreeSelectChangeHandler: function(params) {
			this.searchProvTreeListCode = params.code;
			if(this.objType=='1' || this.objType=='36'|| this.objType == '26' || this.objType == '34' || this.objType == '80' || this.objType=='106' || this.objType == "115"){
				this.getTableData_sk1();
			}else if(this.objType=='2' || this.objType=='3'){
				this.getTableData();
			}else{

			}
		},
		provTreeSelectChangeHandler_qy(params){
			this.searchProvTreeListCode = params.code;
			if(this.objType == '1' || this.objType == '36'|| this.objType == '26' || this.objType == '34' || this.objType == '80' || this.objType == '106' || this.objType == "115"){
				this.getTableData_sk1();
			}else if(this.objType == '5'){
				this.getTableData_dxs1();
			}else if(this.objType=='2' || this.objType=='3'){
				this.getTableData();
			}
		},
		getTableData_dxs1(){
			var _self = this;
			var obj = {
					"adcd": _self.searchProvTreeListCode,
					"adnm":'',
					"groupId": _self.dczId,
					"stcd": '',
					"stnm":_self.stnm,
					"sttp":'',
					"pageNum":_self.pageIndex,
					"pageSize":_self.pageSize
				}
			request.post('/dc/insp/obj/getGrwNotInGroup',obj).then((res)=>{
				_self.loading = false;
					_self.currentShowList = res.data.list;
					_self.currentShowList.forEach((element, index) => {
						element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
					});
					_self.total = res.data.total;
			})
		},
		getTableData_sk1(){
			var _self = this;

			let objType = _self.objType
			var obj = {
				"adcd": _self.searchProvTreeListCode,
				"rsName": _self.searchNameOfRsName,
				"engScal": _self.engScal,
				"id": _self.userId,
				"groupId":_self.dczId,
				"pageNum":_self.pageIndex,
				"pageSize":_self.pageSize,
				"pType": objType,
                "hstInsp": _self.hstInsp
			}
       _self.importParam = obj;
			request.post('/dc/insp/selarea/getResByGroup',obj).then((res)=>{
				_self.loading = false;
					_self.currentShowList = res.data.list;
					_self.currentShowList.forEach((element, index) => {
						element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
					});
					_self.total = res.data.total;
			})
		},
		toAddNewRsvr(){
			this.addRsvrVisible = true
			this.formObj.engScal = this.gongchengguimo[0].value
			this.formObj.rsType = this.zhubaleixing[0].value
		},
		addNewRsvr(formName){
			let _this = this
			if(!this.formObj.rsName){
				this.$message.warning('请输入水库名称')
				return
			}
			if(!this.formObj.rsAdmName){
				this.$message.warning('请输入管理机构名称')
				return
			}
			if(!this.formObj.location){
				this.$message.warning('请输入所在地')
				return
			}
			if(!this.formObj.compDateStr){
				this.$message.warning('请选择建成时间')
				return
			}
			if(!this.formObj.engScal){
				this.$message.warning('请选择工程规模')
				return
			}
			this.formObj.centerXGd = this.formObj.longitude
			this.formObj.centerYGd = this.formObj.latitude
			this.$refs[formName].validate((valid) => {
				if (valid) {
					request.post('/dc/att/rsBase',this.formObj).then(res=>{
						if(res.success){
							_this.$message.success('添加成功')
							this.refreshCurrentShow();
							_this.addRsvrVisible = false
							_this.formObj = {
								"rsName": '',
								"rsAdmName": "",
								"rsLoc": "",
								"location": '',
								"intm": "",
								"engScal": "",
								"totCap": "",
								"damMaxHigh": "",
								"damTypeStr": "",
								"damType":"",
								"rsType":'',
								"regCode": "",
								"rsvrLong": "",
								"rsvrLat": "",
								"compDate": "",
								"admDiv": "",
								"longitude": "",
								"latitude": "",
								"centerXGd": "",
								"centerYGd": ""

							};
						}else{
							_this.$message.error(res.message)
						}
					}).catch(res=>{
						_this.$message.error('请求错误'+ res.message)
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
    addNewShuiHui(){
        let _this = this
        if(!this.formObj1.wtdstNm){
            this.$message.warning('请输入项目名称')
            return
        }
        if(!this.formObj1.wtdstNm){
            this.$message.warning('请输入项目类别')
            return
        }
        if(!this.formObj1.wtdstState){
            this.$message.warning('项目进度')
            return
        }
        if(!this.provName){
            this.$message.warning('请选择省份')
            return
        }
        if(!this.cityName){
            this.$message.warning('请选择市区')
            return
        }
        if(!this.countryName){
            this.$message.warning('请选择区县')
            return
        }
        this.formObj1.locAd = this.countryName;
        request.post('/dc/insp/bisInspWtdst/insert',this.formObj1).then(res=>{
            if(res.success){
                _this.$message.success('添加成功')
                _this.refreshCurrentShow();
                _this.addShuiHuiVisible = false
                _this.formObj1 = {};
                _this.provName = "";
                _this.cityName = "";
                _this.countryName = "";
            }else{
                _this.$message.error(res.message)
            }
        }).catch(res=>{
            _this.$message.error('请求错误'+ res.message)
        })
    },
		getAreaList(val){

			let areaParams = {
				adName: "",
				id: this.dczId,
				pageNum: 1,
				pageSize: 10000
			}

			let adCode = ''
			if(!val){
				adCode = '000000000000'
			}else{
				adCode = val
			}
			request.get('/dc/ad/base/getAdData',{params:{'adCode':adCode}}).then(res=>{
				if(res.success){
					if(this.curSelectItem == 1){
						this.cityList = res.data
					}else if(this.curSelectItem == 2){
						this.countryList = res.data
					}else{
						this.provList = res.data
					}

				}
			})
		},
		handleItemChange(val){
			this.getAreaList(val)
		},
		provChange(val){
			this.curSelectItem = 1
			this.cityName = ''
			this.countryName = ''
			this.formObj.admDiv = val
			this.provList.forEach(ele=>{
					if(ele.adCode == this.provName){
							this.provNames = ele.adName
					}
			})
			this.formObj.location = this.provNames
			this.getAreaList(val)
		},
		cityChange(val){
			this.curSelectItem = 2
			if(val && val != ''){
					this.formObj.admDiv = val
					this.countryName = ''
					this.cityList.forEach(ele=>{
							if(ele.adCode == this.cityName){
									this.cityNames = ele.adName
							}
					})
					this.formObj.location = this.provNames + this.cityNames
					this.getAreaList(val)
			}
		},
		countryChange(val){
			if(val && val != ''){
				this.formObj.admDiv = val
				this.countryList.forEach(ele=>{
						if(ele.adCode == this.countryName){
								this.countryNames = ele.adName
						}
				})
				this.formObj.location = this.provNames + this.cityNames + this.countryNames
			}
		}
	}
};
</script>
<style>
</style>