JT-CIM-SDK/packages/Widgets/DrawTools/CrEditProperty_MilitaryPlot.ce.vue

<template>
	<div class="jt-drawing-dialog">
		<el-dialog :modal="false" :destroy-on-close="false" v-model="dialogVisible" :title="title" :style="{ left: '10rem', background: 'rgb(0 44 126 / 68%)', height: 'calc(100% - 175rem)', width: '180rem', top: '125rem' }" @close="closeDialog" @open="openDialog" :show-close="false">
			<template #header>
				<div slot="title" class="header-title">
					<span style="line-height:24rem;font-size:16rem;color:#fff;font-family: 'Alimama_ShuHeiTi_Bold'">{{ title }}</span>
				</div>
			</template>

			<template #default>
				<div class="odin-dialog__content">
					<div class="jt-drawing-row">
						<div class="col-left">颜色</div>
						<div class="col-main">
							<el-config-provider :locale="locale">
								<el-color-picker v-model="color" show-alpha :predefine="predefineColors" label="12" />
							</el-config-provider>
						</div>
					</div>
					<!-- <div class="jt-drawing-row">
						<div class="col-left">是否边框</div>
						<div class="col-main">
							<el-switch v-model="isShowOutline" />
						</div>
					</div>
					<div class="jt-drawing-row" v-show="isShowOutline">
						<div class="col-left">描边宽度</div>
						<div class="col-main">
							<el-input-number v-model="outlineWidth" :min="0" :max="100" />
						</div>
					</div>
					<div class="jt-drawing-row" v-show="isShowOutline">
						<div class="col-left">描边颜色</div>
						<div class="col-main">
							<el-config-provider :locale="locale">
								<el-color-picker v-model="outlineColor" show-alpha :predefine="predefineColors" label="12" />
							</el-config-provider>
						</div>
					</div> -->


					<div class="el-body-foot">
						<el-button-group>
							<el-button type="primary" :icon="Edit" @click="submit()">修改</el-button>
							<el-button type="primary" style="background-color: rgb(222, 146, 47);" :icon="Delete" @click="remove()">删除</el-button>
							<el-button type="primary" style="background-color: rgb(126, 128, 135);" :icon="Close" @click="close()">关闭</el-button>
						</el-button-group>
					</div>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
	/* 引入ref和reactive 其中ref用于简单类型 reactive用于复杂类型 */
	import {
		computed,
		ref,
		reactive,
		toRefs,
		watch,
		getCurrentInstance
	} from 'vue';

	/* 引入element-plus字体包 */
	import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
	import en from 'element-plus/dist/locale/en.mjs';

	/* 引入element-plus组件 */
	import {
		ElDialog,
		ElInput,
		ElSelect,
		ElOption,
		ElSwitch,
		ElButtonGroup,
		ElConfigProvider,
		ElColorPicker,
		ElRadioButton,
		ElButton,
		ElRadioGroup,
		ElInputNumber,
		ElCollapse,
		ElCollapseItem,
		ElIcon
	} from 'element-plus';

	/* 引入element-plus字体 */
	import {
		ArrowLeft,
		ArrowRight,
		Delete,
		Edit,
		Share,
		Close
	} from '@element-plus/icons-vue';

	import {
		param,
		type
	} from 'jquery';

	import DrawMilitaryPlot from './DrawMilitaryPlot.js';

	const language = ref('zh-cn');
	const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en));

	const {
		proxy
	} = getCurrentInstance();

	const props = defineProps({
		params: {
			id: {
				type: String,
				default: () => undefined
			},
			color: {
				type: String,
				default: () => '255,255,0,0.9'
			},
			outlineWidth: {
				type: Number,
				default: () => 0
			},
			outlineColor: {
				type: String,
				default: () => '255,255,0,0.9'
			},
		},
		showDialog: {
			type: Boolean,
			default: () => false
		}
	});

	const emit = defineEmits(['submit', 'update:showDialog', 'update:params', 'remove']);

	/* 默认颜色 */
	const predefineColors = ref([
		'#ff4500',
		'#ff8c00',
		'#ffd700',
		'#90ee90',
		'#00ced1',
		'#1e90ff',
		'#c71585',
		'rgba(255, 69, 0, 0.68)',
		'rgb(255, 120, 0)',
		'hsv(51, 100, 98)',
		'hsva(120, 40, 94, 0.5)',
		'hsl(181, 100%, 37%)',
		'hsla(209, 100%, 56%, 0.73)',
		'#c7158577'
	]);

	/* 初始赋值 */
	const title = ref('属性编辑');
	const dialogVisible = ref(props.showDialog);
	const isShowOutline = ref(false);


	const color = ref(props.params.color);
	const outlineWidth = ref(0);
	const outlineColor = ref(props.params.outlineColor);

	/* 根据传递的属性更新 */
	updateParams(props.params);

	/**
	 * 根据参数更新内容
	 * @param {JSON} params 参数
	 */
	function updateParams(params) {
		/* 保存到本地 */
		proxy._params = params;
		// _setShowControls(false);

		/* 根据参数的显示不同的内容 */
		switch (params.id) {
			case "DrawStraightArrow":
				title.value = '绘制直线箭头';
				break;
			case "DrawAttackArrow":
				title.value = '绘制攻击箭头';
				break;
			case "DrawPincerArrow":
				title.value = '绘制钳击箭头';
				break;
			case "DrawGatheringPlace":
				title.value = '绘制集结地';
				break;
			case "DrawClosedCurve":
				title.value = '绘制闭合曲面';
				break;
			case "DrawSector":
				title.value = '绘制扇形';
				break;

			case "DrawBowLine":
				title.value = '绘制弓形线';
				break;
			case "DrawLune":
				title.value = '绘制弓形面';
				break;

			case "DrawCurve":
				title.value = '绘制曲线';
				break;
			case "DrawCurveFlag":
				title.value = '绘制曲线旗帜';
				break;
			case "DrawRectFlag":
				title.value = '绘制矩形直角旗帜';
				break;
			case "DrawTriangleFlag":
				title.value = '绘制三角旗帜';
				break;

		}

		color.value = params.color;
		outlineColor.value = params.outlineColor;
		outlineWidth.value = params.outlineWidth;
	}

	/**
	 * 显示控件设置
	 * @param {Boolean} isShow 是否显示
	 */
	function _setShowControls(isShow) {
		isShowColor.value = isShow;
		isShowOutlineColor.value = isShow;
		isShowOutlineWidth.value = isShow;
	}

	/**
	 * 对外部公开的函数
	 */
	defineExpose({
		// updateParams
	});

	/**
	 * 提交更改
	 */
	function submit() {
		let outParam = proxy._params;
		outParam.color = color.value;
		outParam.outlineColor = outlineColor.value;
		outParam.outlineWidth = outlineWidth.value;
		emit('submit', outParam);
	}

	/**
	 * 关闭
	 */
	function close() {
		dialogVisible.value = false;
	}

	/**
	 * 提交删除
	 */
	function remove() {
		emit('remove', {});
		dialogVisible.value = false;
	}


	/**
	 * 窗口关闭，修改双向绑定值
	 */
	function closeDialog() {
		emit('update:showDialog', false);
	}

	/**
	 * 窗口打开
	 */
	function openDialog() {
		updateParams(props.params);
	}
</script>
<style lang="scss">
	/* 引入element-plus的内部样式 必须在此处引入 否则无效 */
	/* 为了保证引入的样式文件起作用 必须保证文件名称以.ce.vue结束 */
	@import 'element-plus/theme-chalk/index.css';

	//组件内部样式
	.el-button {
		height: 32rem !important;
		padding: 8rem 15rem !important;
		font-size: 14rem !important;
	}

	.el-input__wrapper {
		padding: 1rem 11rem !important;
	}

	.el-input {
		height: 32rem !important;
		font-size: 14rem !important;
	}

	.jt-drawing-row .col-left {
		font-size: 14rem !important;
	}

	.el-color-picker__trigger {
		height: 32rem !important;
		padding: 4rem !important;
	}

	.el-radio-button__inner {
		padding: 8rem 15rem !important;
		font-size: 14rem;
	}

	.el-textarea__inner {
		padding: 5rem 11rem !important;
		font-size: 14rem;
	}

	.el-input__inner {
		height: 32rem !important;
		font-size: 14rem !important;
	}

	/* 墙对话框内容行样式 */
	.jt-drawing-row {
		display: flex;
		flex-direction: row;
		height: 40rem;
		align-items: center;

		/* 行左侧标题样式 */
		.col-left {
			display: flex;
			align-items: center;
			justify-content: right;
			width: 60rem;
			font-family: 'Alimama_ShuHeiTi_Bold';
			font-weight: bold;
			margin-right: 8rem;
		}

		/* 主要内容样式 */
		.col-main {
			flex: 1;
			display: flex;
			flex-direction: row;

			.el-input--suffix {
				background-color: rgba(255, 255, 255, 0);
			}

			.el-input--suffix * {
				background-color: rgba(255, 255, 255, 0);
				color: rgba(255, 255, 255, 1);
			}

			/* 数字组件按钮背景色 */
			.el-input-number__decrease,
			.el-input-number__increase {
				background-color: rgb(52, 137, 255);
				color: rgb(255, 255, 255);

			}
		}
	}

	/* 墙对话框整体样式 */
	.jt-drawing-dialog {
		pointer-events: none; // ***覆盖层元素增加可穿透点击事件***

		.el-dialog {
			pointer-events: auto; // ***弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）***
			position: absolute !important; //将通知框的position改成absolute，可以在某个div进行显示

			background: rgb(5 45 155 / 70%);
			min-width: 280rem;
			overflow: hidden;

			margin-top: 0rem;

			/* 对话框标题头样式 */
			.el-dialog__header {
				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAAyCAIAAAD9fhrKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NTc1YTY2Yi1hY2U5LTUyNDctODM5MS01MGJjMjM4MDkxMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDY4MTUxMzk2RDM1MTFFRDkzM0JDNEQ5N0IwQTIxRjYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDY4MTUxMzg2RDM1MTFFRDkzM0JDNEQ5N0IwQTIxRjYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YjZlNTUzODYtMzRjZC02NDQyLWI4OTktODY4YTdiYTNkMzgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg1NzVhNjZiLWFjZTktNTI0Ny04MzkxLTUwYmMyMzgwOTEwOSIv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) no-repeat;
				background-size: 100%;
				margin-right: 0rem;
				padding: 6rem;
				text-align: center;
			}

			/* 对话框关闭按钮的样式 */
			.el-dialog__headerbtn {
				height: 34rem;
			}

			/* 对话框主体的样式 */
			.el-dialog__body {
				padding: 10rem;
				color: #fff;
			}

			/* 颜色选择器的宽度 */
			.el-color-picker__trigger {
				width: 120rem;
			}

			/* 底部按钮容器样式 */
			.el-body-foot {
				position: absolute;
				bottom: 8rem;
				right: 8rem;
				width: calc(100% - 16rem);
			}

			/* 底部容器内分组容器样式 */
			.el-body-foot .el-button-group {
				display: flex;
			}

			/* 底部容器内按钮样式 */
			.el-body-foot .el-button-group .el-button {
				border: solid 0rem rgb(255, 0, 0);
				flex: 1;
			}
		}
	}
</style>