orbit-ch-web/src/components/xqglComponents/xqDetails.vue

<template>
	<div v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 200).available"
			 class="leftArea-investigationDetails">
		<div class="investigationDetails-title"></div>
		<!--    <div class="tableChange-title">-->
		<!--      <div class="title-xqtbFont" @click="toXQTB">需求提报</div>-->
		<!--    </div>-->
		<!-- 操作区域写了两个div，通过需求提报和需求获取的点击事件，只能出现一个对应的div -->
		<div v-show="operateTBvserble" class="operate-buttoms">

			<el-button v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 2002).available" class='target-button'
								 type="primary" @click="taskShow = true">任务获取
			</el-button>
			<el-dropdown v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 2001).available"
									 @command="getTargetFromMapClick">
				<el-button class='handle-button' type="primary">
					手动导入<i class="el-icon-arrow-down el-icon--right"></i>
				</el-button>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 20001).available"
														command="selectPoint">地图点选
					</el-dropdown-item>
					<el-dropdown-item v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 20002).available"
														command="selectPoints">地图框选
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<el-button v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 2002).available" class='target-button'
								 type="primary" @click="getXQfromTargetBase">目标库导入
			</el-button>
			<el-button v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 2003).available" class='excel-button'
								 type="primary" @click="popExcelWindow">excel导入
			</el-button>
		</div>
		<div v-show="operateHQvserble" class="operate-areaForXQHQ">
			<div class="time-area">
				<span class="timeArea-font">时间段</span>
				<el-date-picker v-model="timeValue" :default-time="['00:00:00', '00:00:00']" class="datePicker-style"
												end-placeholder="结束时间"
												start-placeholder="开始时间" type="datetimerange">
				</el-date-picker>
			</div>
			<div class="button-area">
				<el-button class="get-XQ" type="primary">获取详情</el-button>
			</div>
		</div>
		<!-- 侦察需求详情的表格内容 -->
		<div class="table1TB-area">
			<el-table ref="multipleTable" :data="XQTBviserble ? getTableXQTBData : getTableXQHQData" height="450"
								style="width: 100%" tooltip-effect="light">
				<el-table-column align="center" type="selection" width="40"></el-table-column>
				<el-table-column v-for="(col, i) in cols" :key="i" :label="col.label" :prop="col.prop" show-overflow-tooltip
												 width="75"
				></el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" @click="showTaskInfo(scope.row)">详细信息</el-link>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- <div class="table1TB-area" v-show="XQTBviserble">
			<xqglTableTB @getValues='getDataFromSonXQTB' @getRightClickValue='getDataFromSonXQTBrightclick'
				:tableXQTBData="getTableXQTBData"></xqglTableTB>
		</div>
		<div class="table1HQ-area" v-show="XQHQviserble">
			<xqglTableHQ @getValues='getDataFromSonXQTB'></xqglTableHQ>
		</div> -->
		<div class="CH-buttonDIV">
			<!-- <el-button class="CHbutton-style" type="primary" @click="getXQTBtalbeContents">查询</el-button> -->
			<el-button v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 2005).available" class="CHbutton-style"
								 type="primary" @click="toCHpage">提报
			</el-button>
		</div>
		<div v-show="rightClickMenuVisible" id="rightClickMenu" class="XQtableRightClick-menu">
			<li @click="xqtbUptate(1)">时间应用到所有</li>
			<li @click="xqtbUptate(2)">手段应用到所有</li>
			<li @click="rightClickMenuDelete">删除</li>
			<li @click="rightClickMenuClear">清空</li>
			<li @click="rightClickMenuClose">取消</li>
		</div>
		<!--		<targetPop v-show="targetPopVis" :rowData="selRow" @closePop="targetPopVis = false"-->
		<!--							 @comfirm="getxqtbList"></targetPop>-->
		<mapPop v-show="mapPopVis" :mapPointSelect="mapPointSelect" @closePop="mapPopVis = false" @comfirm="getxqtbList">
		</mapPop>
		<excelPop v-show="excelPopVis" @closePop="excelPopVis = false" @comfirm="getxqtbList"></excelPop>


		<el-dialog :visible.sync="taskShow" show-close title="请选择任务条件" width="300px">
			<div style="margin: 10px 0">请选择任务来源</div>
			<div class="passwayDatePicker">
				<el-select
						v-model="selTasks"
						collapse-tags
						multiple
						size="mini"
						style="width: 240px"
						@change='changeSelect'
				>
					<el-checkbox v-model="checkeALl" style="margin-left: 20px;" @change='selectAll'>全选</el-checkbox>
					<el-option
							v-for="(item, i) in taskSource"
							:key="i"
							:label="item"
							:value="i"
					/>
				</el-select>
			</div>
			<div style="margin: 10px 0">请选择任务时间</div>
			<div>
				<el-date-picker v-model="taskDatetimeRange"
												datetimeLoaded="true"
												end-placeholder="结束时间"
												size="mini"
												start-placeholder="开始时间"
												style="width: 240px" type="datetimerange"
												value-format="yyyy-MM-dd HH:mm:ss">
				</el-date-picker>
			</div>
			<div slot="footer">
				<el-button @click="taskShow=false">取 消</el-button>
				<el-button type="primary" @click="getTaskList">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="taskInfoShow" show-close title="详细信息" width="60%">
			<el-form :inline="true" :model="seltask" class="demo-form-inline">

				<el-form-item v-for="(item, key) in taskInfolabels" :key="item" :label="item + ':'">
					<el-input v-model="seltask[key]" disabled placeholder="无"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="taskShow=false">取 消</el-button>
				<el-button type="primary" @click="getTaskList">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {
	postClickedTagetListData,
	getClickedTagetListDataForxqlbTB,
	getXQTBListViaPointTarget,
	getXQTBListViaMapSelect,
	getXQTBListViaExcelSelect,
	getTargetListCodeNumber_headStr,
	xqtbBatchUpdate,
	postxqglRightClickMenuDeleteRow,
	postxqglRightClickMenuClearAllData,
	getSatelliteFilterData
} from '@/api/xqglApi.js';

import {submitPlan} from "@/api/xqjyApi";

import xqglTableTB from '@/components/tables/xqglTable_XQTB.vue'
import xqglTableHQ from '@/components/tables/xqglTable.vue'
import targetPop from './targetPop.vue';
import mapPop from './mapPop.vue';
import excelPop from './excelPop.vue';

import {mapState, mapMutations} from 'vuex'
import {selAllTargetList} from "@/api/rwjsApi";

export default {
	name: "xqDetails",
	components: {xqglTableTB, xqglTableHQ, targetPop, mapPop, excelPop},
	data() {
		return {
			taskInfolabels: {
				rate: "频次",
				InvestigativeMeans: "侦察手段",
				satelliteSelected: "卫星ID",

				demandSources: "需求来源",

				proposeDepartment: "提出部门",
				demandDescribe: "需求来源描述",

				isaccurate: "是否精确",

				isEmcon: "是否电磁静默",
				reqInterval: "最小观测间隔时间",

				receivingStation: "接收站名",

				workMode: "工作模式",

				sensorID: "传感器代号",

				sensorMode: "传感器模式",

				pitchAngle: "俯仰角",

				groundResolution: "分辨率",

				priorInfo: "先验信息",

				productDest: "产品目的地",

				points: "目标点集"
			},

			targetPopVis: false,
			mapPopVis: false,
			excelPopVis: false,
			taskShow: false,
			taskInfoShow: false,
			mapPointSelect: '',
			selRow: {},
			taskDatetimeRange: ["", ""],
			checkeALl: false,
			selTasks: [],
			taskSource: ["气象海洋", "水利交通", "防灾减灾", "城乡规划", "农林渔牧"],
			//需求提报，需求获取动态追加类
			clickTBtipStyle: '',
			clickHQtipStyle: '',
			seltask: {},
			//需求提报，需求获取操作区域是否显示
			operateTBvserble: true,
			operateHQvserble: false,
			//需求获取时选择的时间
			timeValue: '',
			//需求提报，需求获取的表格内容是否显示
			XQTBviserble: true,
			XQHQviserble: false,
			//需求提报表格数据
			cols: [
				{
					prop: 'id',
					label: '需求ID',
				},
				{
					prop: 'reqName',
					label: '需求名称',
				},
				{
					prop: 'typeName',
					label: '目标类型',
				},
				{
					prop: 'parentId',
					label: '目标编号',
				},
				{
					prop: 'targetName',
					label: '目标名称',
				},
				{
					prop: 'startTime',
					label: '需求开始时间',
				},
				{
					prop: 'endTime',
					label: '需求结束时间',
				},
				{
					prop: 'priority',
					label: '优先级',
				},
			],
			getTableXQTBData: [],
			parentId: "",
			getTableXQHQData: [],

			//点击单条需求窗口（点目标）显示/隐藏
			XQtargetVisible: false,
			//地图点选窗口显示/隐藏
			mapSelectVisible: false,
			//控制excel导入窗口显示/隐藏
			closeExcelWindowVisible: false,

			//目标列表和卫星筛选交替显示
			xqglTargetListVisible: false,

			//右键需求详情表格行时，弹出的菜单 显示/隐藏
			rightClickMenuVisible: false,

			loading: null,
		};
	},
	computed: {
		...mapState("xqgl", ["getXqtb"]),
	},
	watch: {
		$route(to, from) {
			if (to.name === "xqglPage") {
				this.getxqtbList();
			}
		},
		getXqtb() {
			this.getxqtbList();
		},
	},
	methods: {
		...mapMutations("xqgl", ["setParentId"]),
		handleCheckAll() {
		},
		showTaskInfo(row) {
			this.taskInfoShow = true;

			const satelliteSelected = JSON.parse(row.satelliteSelected)
			let ids = []
			for (const i in satelliteSelected) {
				ids.push(satelliteSelected[i].satelliteId)

			}
			this.seltask = Object.assign({}, row)
			this.seltask.satelliteSelected = ids.join(",")

			this.seltask.isaccurate = this.seltask.isaccurate == 0 ? '是' : '否'
			this.seltask.isEmcon = this.seltask.isEmcon == 0 ? '是' : '否'
			this.seltask.groundResolution = this.seltask.groundResolution + '米'
		},
		selectAll() {
			this.selTasks = [];
			if (this.checkeALl) {
				this.taskSource.forEach((item, i) => {
					this.selTasks.push(i)
				});
			} else {
				this.selTasks = [];
			}
		},
		changeSelect(val) {
			if (val.length === this.taskSource.length) {
				this.checkeALl = true;
			} else {
				this.checkeALl = false;
			}
		},


		getTaskList() {
			this.taskShow = false;
			this.loading = this.$loading({
				lock: true,
				text: "查询中",
				spinner: 'el-icon-loading',
				background: 'rgba(0,0,0,0.8)'
			});
			const param = {
				demandSources: this.selTasks.join(","),
				startTime: (this.taskDatetimeRange && this.taskDatetimeRange.length) > 0 ? this.taskDatetimeRange[0] : null,
				endTime: (this.taskDatetimeRange && this.taskDatetimeRange.length) > 1 ? this.taskDatetimeRange[1] : null,
			}
			const names = ["固定目标", "移动目标", "区域目标", "线目标", "点群目标", "未知"]
			selAllTargetList(param).then(res => {
				this.getTableXQTBData = []
				this.loading.close();
				if (res.code === 200) {
					res.data.forEach(item => {
						item.typeName = item.type < 0 ? names[5] : names[item.type]
						this.getTableXQTBData.push(item)
					})
				} else {
					this.$message.error(res.msg);
				}
			})


		},
		popIsShow(type) {
			const pops = ['targetPopVis', 'mapPopVis', 'excelPopVis'];
			pops.forEach(item => {
				this[item] = type === item;
			})
		},
		handleClick(row) {
			this.selRow = {...row};
			this.popIsShow('targetPopVis');
		},
		rightClick(row, column, event) {
			this.selRow = row;
			this.rightClickMenuVisible = true
			var rightClickMenu = document.querySelector("#rightClickMenu")
			event.preventDefault();
			rightClickMenu.style.left = event.clientX + 'px'
			rightClickMenu.style.top = event.clientY + 'px'
		},
		toXQTB() {
			//动态追加类
			this.clickHQtipStyle = ''
			this.clickTBtipStyle = 'ChangeTitleTB-background'
			//显示操作区域
			this.operateHQvserble = false
			this.operateTBvserble = true
			//显示表格
			this.XQHQviserble = false
			this.XQTBviserble = true
		},
		toXQHQ() {
			//动态追加类
			this.clickTBtipStyle = ''
			this.clickHQtipStyle = 'ChangeTitleHQ-background'
			//显示操作区域
			this.operateTBvserble = false
			this.operateHQvserble = true
			//显示表格
			this.XQTBviserble = false
			this.XQHQviserble = true
		},
		//通过点击地球上的点获取点的经纬度，并将单条需求数据存放至库 表中
		getTargetFromMapClick(command) {
			//Excel导入隐藏
			this.closeExcelWindowVisible = true;
			//目标列表导入,隐藏
			this.xqglTargetListVisible = false;
			console.log(command);
			if (command === "selectPoints") {
				this.mapPointSelect = command
				this.$store.dispatch("xqglMapRectangleVisible", !this.$store.state.xqglMapRectangleVisible)
				console.log("地图框选被选中：", this.$store.state.xqglMapRectangleVisible);
				// this.mapSelectForm.lonlat = this.$store.state.xqglMapRectangleLonLats.toString();
			}
			if (command === "selectPoint") {
				this.mapPointSelect = command
				this.$store.dispatch("xqglMapPointVisible", !this.$store.state.xqglMapPointVisible)
				console.log("地图点选被选中：", this.$store.state.xqglMapPointVisible);
				// this.mapSelectForm.lonlat = this.$store.state.xqglMapPointLonLat.toString();
			}
			this.$store.dispatch("xqglContentVisible", false)


			//内容详情 弹窗 弹出前，确保 点目标弹窗 和 excel导入弹窗 关闭状态
			this.XQtargetVisible = false
			this.closeExcelWindowVisible = false
			this.mapSelectVisible = true

			this.popIsShow('mapPopVis');
		},
		//侦察需求详情表格下的“目标库导入”绑定的事件
		getXQfromTargetBase() {
			this.$emit("clickTarget");
			//Excel导入，隐藏
			this.excelPopVis = false;

		},
		//点击excel导入按钮，弹窗；同时，点目标和地图点选两个窗口不显示
		popExcelWindow() {
			this.popIsShow('excelPopVis');
		},

		//侦察需求详情某行被 左键 点击时，从子组件表格中获取数据
		getDataFromSonXQTB(getData) {
			console.log("子组件传过来的行数据：", getData);
			console.log('rowClickFlag:', getData.rowData.id);
			this.xqtbLeftClickedRowData = getData.rowData;
			this.pointTargetTitle = getData.rowData.targetName;
			this.pointTargetForm.xqTBrowID = getData.rowData.id
			if (getData.rowClickFlag === '1') {
				this.mapSelectVisible = false
				this.closeExcelWindowVisible = false
				this.XQtargetVisible = true
			}
			// this.pointTargetForm.pointTargetStartTime = new Date(getData.rowData.startTime * 1000);
			this.pointTargetForm.pointTargetStartTime = getData.rowData.startTime;
			this.pointTargetForm.pointTargetEndTime = getData.rowData.endTime;
			// this.pointTargetForm.pointTargetEndTime = new Date(getData.rowData.endTime * 1000);
			this.pointTargetForm.investigationMeans = getData.rowData.investigativeMeans;
			if (getData.rowData.investigativeMeans === '0') {
				this.pointTargetForm.investigationMeans = '默认';
			}
			if (getData.rowData.observationPurpose) {
				this.pointTargetForm.selectValue = getData.rowData.observationPurpose;
			}
			if (getData.rowData.priority !== 999) {
				this.pointTargetForm.priorNumber = getData.rowData.priority;
			}
			if (getData.rowData.rate) {
				this.pointTargetForm.frequency = getData.rowData.rate;
			}
		},


		//右击下拉菜单的各项操作

		// 时间和手段应用到所有
		xqtbUptate(type) {
			let data = {
				relationId: this.selRow.id,
				type: type,
				parentId: this.parentId,
				satelliteSelected: this.satelliteSelected,
			}
			xqtbBatchUpdate(data).then(res => {
				if (res.code === 200) {
					this.getxqtbList();
					this.$message.success('操作成功');
				} else {
					this.$message.warning(res.message);
				}
			});
			this.rightClickMenuVisible = false
		},


		//删除
		rightClickMenuDelete() {
			let data = new FormData();
			data.append("ids", this.selRow.id);
			postxqglRightClickMenuDeleteRow(data).then(res => {
				if (res.code === 200) {
					this.getxqtbList();
					this.$message.success('操作成功');
				} else {
					this.$message.warning(res.message);
				}
			});
			this.rightClickMenuVisible = false;
		},
		//清空
		rightClickMenuClear() {
			let data = {
				parentId: this.parentId,
			};
			postxqglRightClickMenuClearAllData(data).then(res => {
				if (res.code === 200) {
					this.getxqtbList();
					this.$message.success('操作成功');
				} else {
					this.$message.warning(res.message);
				}
			});
			this.rightClickMenuVisible = false;
		},
		//取消
		rightClickMenuClose() {
			this.rightClickMenuVisible = false;
		},

		//点击  提报  按钮，进入需求解译页面
		toCHpage() {
			//前和后端的 数据通信 和确认信息 等操作
			let parentIds = [];
			this.getTableXQTBData.forEach(element => {
				parentIds.push(element.parentId)
			});

			this.loading = this.$loading({
				lock: true,
				text: "提报计算中",
				spinner: 'el-icon-loading',
				background: 'rgba(0,0,0,0.8)'
			});
			submitPlan(parentIds).then(res => {
				if (res.code === 200) {
					this.loading.close();
					this.$router.push({name: "xqjyPage"});
				}
			});
		},

		getxqtbList() {//getxqglTBTableFromClickedTargetList
			const purposeDic = {
				1: '快响应急侦察',
				2: '陆地伪装识别',
				3: '早期异常监测',
				4: '海上搜索发现',
				5: '海上持续跟踪',
				6: '海上识别确认',
			}
			const typeDic = {
				0: '固定目标',
				1: '移动目标',
				2: '区域目标',
			}
			const statusDic = {
				0: '未提交',
				1: '已提交',
			}
			let params = {
				parentId: this.parentId,
				status: 0,
			}
			getClickedTagetListDataForxqlbTB(params).then(res => {
				let resData = []
				if (res.code == 200) {
					resData = res.resp
				}
				this.getTableXQTBData = resData;
				this.getTableXQTBData.forEach(item => {
					item.observationPurposeChinese = purposeDic[item.observationPurpose];
					item.typeChinese = typeDic[item.type];
					item.statusChinese = statusDic[item.status];
				})
				//20221019屏蔽添加的目标需求点
				//this.$events.$emit('xqgl-targetList', resData)
			})
		},
		getParentId() {
			getTargetListCodeNumber_headStr().then(res => {
				if (res.code === 200 && res.resp) {
					this.parentId = res.resp;
					sessionStorage.setItem("parentId", res.resp);
					this.setParentId(this.parentId);
					// this.getxqtbList();
				} else {
					console.error('parentId获取失败');
				}
			})
		},
	},
	mounted() {
		this.getParentId();
		this.toXQTB();
		this.getTaskList();
	}
};
</script>

<style lang='scss' scoped>
.leftArea-investigationDetails {
	width: 38%;
	height: 560px;
	background: url('@/assets/ClipImage/dikuang/xuqiuxiangqing.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	margin-top: 6px;

	.investigationDetails-title {
		width: 100%;
		height: 38px;
		position: absolute;
		top: -44px;
		background: url('@/assets/ClipImage/biaoti/xuqiuxinagqing.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.ChangeTitleTB-background {
		background: url("@/assets/ClipImage/biaoti/xuqiutibao.png") no-repeat;
		background-size: 100% 100%;
	}

	.ChangeTitleHQ-background {
		background: url("@/assets/ClipImage/biaoti/xuqiuhuoqu.png") no-repeat;
		background-size: 100% 100%;
	}

	.tableChange-title {
		width: 500px;
		height: 38px;
		margin: 6px 10px;
		display: flex;

		.title-xqtbFont {
			width: 100%;
			height: 18px;
			text-align: center;
		}

		.title-xqhqFont {
			width: 62px;
			height: 18px;
			margin-left: 152px;
		}
	}

	.operate-buttoms {
		width: 500px;
		height: 42px;
		box-sizing: border-box;
		padding: 0 56px;
		display: flex;
		justify-content: space-between;
		margin: 10px auto 0;

		/deep/ .handle-button,
		.target-button,
		.excel-button {
			width: 80px;
			height: 30px;
			padding: 0;
			font-family: 'SourceHanSansCN-Regular';
			font-size: 14px;
		}
	}

	.operate-areaForXQHQ {
		width: 500px;
		height: 42px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.timeArea-font {
			height: 30px;
			line-height: 30px;
			font-family: 'SourceHanSansCN-Regular';
			font-size: 14px;
			margin-right: 8px;
		}

		/deep/ .datePicker-style {
			width: 350px;
			height: 30px;
			padding: 0;
			background: rgba(160, 160, 160, 0.3);
			border: none;
		}

		/deep/ .get-XQ {
			width: 80px;
			height: 30px;
			padding: 0;
			font-family: 'SourceHanSansCN-Regular';
			font-size: 14px;
		}
	}

	.table1TB-area,
	.table1HQ-area {
		width: 100%;
		height: 450px;
		margin: 0 auto;
	}

	.CH-buttonDIV {
		width: 500px;
		margin: 10px auto 0;
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.CHbutton-style {
			width: 60px;
			height: 30px;
			padding: 0;
			font-family: 'SourceHanSansCN-Regular';
			font-size: 16px;
		}
	}

	.XQtableRightClick-menu {
		width: 120px;
		height: 150px;
		background-color: #557388;
		border: solid 1px #ffffff;
		position: fixed;

		li {
			list-style: none;
			width: 120px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-family: 'SourceHanSansCN-Regular';
			font-size: 12px;
			color: #fff;
			cursor: pointer;
		}

		li:nth-of-type(odd) {
			background: #254961;
		}

		li:nth-of-type(even) {
			background: #557388;
		}

		li:hover {
			background: #0095ff;
		}

	}
}
</style>