no message

src/components/CrMap/CrEditProperty.ce.vue

@@ -0,0 +1,674 @@
+<template>
+	<div class="jt-wall-dialog">
+		<el-dialog draggable :modal="false" :destroy-on-close="false" v-model="dialogVisible" :title="title"
+			:style="{ left: '0px', background: 'rgb(0 44 126 / 68%)', height: 'calc(100% - 50px)', width: '180px', top: '0px' }"
+			@close="closeDialog" @open="openDialog">
+			<template #header>
+				<div slot="title" class="header-title">
+					<span
+						style="line-height:24px;font-size:16px;color:#fff;font-family: 'Alimama_ShuHeiTi_Bold'">{{ title }}</span>
+				</div>
+			</template>
+
+			<template #default>
+				<div class="odin-dialog__content">
+					<div class="jt-wall-row" v-show="isShowHeight">
+						<div class="col-left">高度</div>
+						<div class="col-main">
+							<el-input v-model="wallHeight" placeholder="输入高度值" clearable />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowArcHeight">
+						<div class="col-left">弯曲度</div>
+						<div class="col-main">
+							<el-input v-model="arcHeight" placeholder="输入弯曲度0～9000" clearable />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowLineWidth">
+						<div class="col-left">线宽</div>
+						<div class="col-main">
+							<el-input v-model="lineWidth" placeholder="输入宽度值" clearable />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowGlowpower">
+						<div class="col-left">发光强度</div>
+						<div class="col-main">
+							<el-input v-model="glowPower" placeholder="输入发光强度0～1" clearable />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowColor">
+						<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-wall-row" v-show="isShowDirection">
+						<div class="col-left">流动方向</div>
+						<div class="col-main">
+							<el-radio-group v-model="radioDirection">
+								<el-radio-button v-for="(item, index) in directions" :label="item.key" v-model="item.value"
+									@change="directionChange" />
+							</el-radio-group>
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowOrder">
+						<div class="col-left">流动顺序</div>
+						<div class="col-main">
+							<el-radio-group v-model="radioOrder">
+								<el-radio-button v-for="(item, index) in orders" :label="item.key" v-model="item.value" />
+							</el-radio-group>
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowSpeed">
+						<div class="col-left">流动速度</div>
+						<div class="col-main">
+							<div class="col-main">
+								<el-input v-model="speed" placeholder="输入流动速度0～10" clearable />
+							</div>
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowCount">
+						<div class="col-left">重复数量</div>
+						<div class="col-main">
+							<el-input v-model="yCount" placeholder="输入1～100" clearable />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowText" style="height: 60px;">
+						<div class="col-left">文字内容</div>
+						<div class="col-main">
+							<el-input v-model="txtContent" placeholder="输入显示的文字内容" clearable type="textarea" :rows="2" />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowOutlineWidth">
+						<div class="col-left">描边宽度</div>
+						<div class="col-main">
+							<el-input v-model="outlineWidth" placeholder="输入宽度值" clearable />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowOutlineColor">
+						<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="jt-wall-row" v-show="isShowVideoUrl" style="height: 100px;">
+						<div class="col-left">视频地址</div>
+						<div class="col-main">
+							<el-input v-model="txtVideoUrl" placeholder="输入播放视频的地址" clearable type="textarea" :rows="4" />
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowAxis">
+						<div class="col-left">X轴平移</div>
+						<div class="col-main">
+							<el-input-number v-model="axisX" :precision="2" :step="0.1" :max="10"></el-input-number>
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowAxis">
+						<div class="col-left">Y轴平移</div>
+						<div class="col-main">
+							<el-input-number v-model="axisY" :precision="2" :step="0.1" :max="10"></el-input-number>
+						</div>
+					</div>
+					<div class="jt-wall-row" v-show="isShowAxis">
+						<div class="col-left">Z轴平移</div>
+						<div class="col-main">
+							<el-input-number v-model="axisZ" :precision="2" :step="0.1" :max="10"></el-input-number>
+						</div>
+					</div>
+
+					<div class="el-body-foot">
+						<el-button-group class="ml-4">
+							<el-button type="primary" :icon="Edit" @click="submit()">修改</el-button>
+							<el-button type="danger" :icon="Delete" @click="remove()">删除</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';
+	import {
+		ElDialog,
+		ElInput,
+		ElButtonGroup,
+		ElConfigProvider,
+		ElColorPicker,
+		ElRadioButton,
+		ElButton,
+		ElRadioGroup,
+		ElInputNumber
+	} from 'element-plus';
+	import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+	import en from 'element-plus/dist/locale/en.mjs';
+	import {
+		ArrowLeft,
+		ArrowRight,
+		Delete,
+		Edit,
+		Share
+	} from '@element-plus/icons-vue';
+	import {
+		param,
+		type
+	} from 'jquery';
+	import {
+		DrawTools
+	} from './DrawTools.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
+			},
+			height: {
+				type: Number,
+				default: () => 13
+			},
+			bottomHeight: {
+				type: Number,
+				default: () => 0
+			},
+			color: {
+				type: String,
+				default: () => '255,255,0,0.9'
+			},
+			direction: {
+				type: String,
+				default: () => 'horizontal'
+			},
+			order: {
+				type: String,
+				default: () => '+'
+			},
+			count: {
+				type: Number,
+				default: () => 2
+			},
+			text: {
+				type: String,
+				default: () => ''
+			},
+			lineWidth: {
+				type: Number,
+				default: () => 2
+			},
+			glowPower: {
+				type: Number,
+				default: () => 0.25
+			},
+			outlineWidth: {
+				type: Number,
+				default: () => 0
+			},
+			outlineColor: {
+				type: String,
+				default: () => '255,255,0,0.9'
+			},
+			speed: {
+				type: Number,
+				default: () => 1.5
+			},
+			videoUrl: {
+				type: String,
+				default: () => ''
+			},
+			arcHeight: {
+				type: Number,
+				default: () => 1000
+			},
+			axisX: {
+				type: Number,
+				default: () => 0
+			},
+			axisY: {
+				type: Number,
+				default: () => 0
+			},
+			axisZ: {
+				type: Number,
+				default: () => 0
+			}
+		},
+		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 isShowColor = ref(false);
+	const isShowText = ref(false);
+	const isShowHeight = ref(false);
+	const isShowDirection = ref(false);
+	const isShowOrder = ref(false);
+	const isShowCount = ref(false);
+	const isLineWidth = ref(false);
+	const isShowLineWidth = ref(false);
+	const isShowGlowpower = ref(false);
+	const isShowOutlineWidth = ref(false);
+	const isShowOutlineColor = ref(false);
+	const isShowSpeed = ref(false);
+	const isShowVideoUrl = ref(false);
+	const isShowArcHeight = ref(false);
+	const isShowAxis = ref(false);
+	const color = ref(props.params.color);
+	const title = ref('属性编辑');
+	const dialogVisible = ref(props.showDialog);
+	const directions = reactive([{
+		key: '左右',
+		value: 'horizontal'
+	}, {
+		key: '上下',
+		value: 'vertical'
+	}]);
+	const orders = reactive([]);
+	const radioDirection = ref('');
+	const radioOrder = ref('');
+	const wallHeight = ref(0);
+	const yCount = ref(0);
+	const txtContent = ref('');
+	const lineWidth = ref(0);
+	const glowPower = ref(0.25);
+	const outlineWidth = ref(0);
+	const outlineColor = ref(props.params.outlineColor);
+	const speed = ref(1.5);
+	const txtVideoUrl = ref('');
+	const arcHeight = ref(1000);
+	const axisX = ref(0);
+	const axisY = ref(0);
+	const axisZ = ref(0);
+	/* 根据传递的属性更新 */
+	updateParams(props.params);
+
+	/**
+	 * 根据参数更新内容
+	 * @param {JSON} params 参数
+	 */
+	function updateParams(params) {
+		/* 保存到本地 */
+		proxy._params = params;
+		_setShowControls(false);
+		/* 根据参数的显示不同的内容 */
+		if (params.id === DrawTools.DrawType.TextWall) {
+			title.value = '广告牌编辑';
+			isShowColor.value = true;
+			isShowText.value = true;
+			isShowHeight.value = true;
+		} else if (params.id === DrawTools.DrawType.DynamicWall) {
+			title.value = '动态围栏编辑';
+			isShowColor.value = true;
+			isShowDirection.value = true;
+			isShowOrder.value = true;
+			isShowCount.value = true;
+			isShowHeight.value = true;
+			isShowSpeed.value = true;
+		} else if (params.id === DrawTools.DrawType.NormalWall) {
+			title.value = '普通围栏编辑';
+			isShowColor.value = true;
+			isShowHeight.value = true;
+		} else if (params.id === DrawTools.DrawType.Circle) {
+			title.value = '贴地圆编辑';
+			isShowColor.value = true;
+			isShowOutlineColor.value = true;
+			isShowOutlineWidth.value = true;
+		} else if (params.id === DrawTools.DrawType.DynamicCircle) {
+			title.value = '扩散圆编辑';
+			isShowColor.value = true;
+			isShowCount.value = true;
+			isShowSpeed.value = true;
+		} else if (params.id === DrawTools.DrawType.House) {
+			title.value = '房屋编辑';
+			isShowColor.value = true;
+			isShowHeight.value = true;
+		} else if (params.id === DrawTools.DrawType.VideoWall) {
+			title.value = '视频墙编辑';
+			isShowHeight.value = true;
+			isShowVideoUrl.value = true;
+			isShowAxis.value = true;
+		} else if (params.id === DrawTools.DrawType.Polyline) {
+			title.value = '贴地线编辑';
+			isShowColor.value = true;
+			isShowLineWidth.value = true;
+		} else if (params.id === DrawTools.DrawType.ArrowPolyline) {
+			title.value = '箭头线编辑';
+			isShowColor.value = true;
+			isShowLineWidth.value = true;
+		} else if (params.id === DrawTools.DrawType.DynamicPolyline) {
+			title.value = '动态线编辑';
+			isShowColor.value = true;
+			isShowOrder.value = true;
+			isShowCount.value = true;
+			isShowLineWidth.value = true;
+			isShowSpeed.value = true;
+		} else if (params.id === DrawTools.DrawType.GrowPolyline) {
+			title.value = '发光线编辑';
+			isShowColor.value = true;
+			isShowLineWidth.value = true;
+			isShowGlowpower.value = true;
+		} else if (params.id === DrawTools.DrawType.OutlinePolyline) {
+			title.value = '描边线编辑';
+			isShowColor.value = true;
+			isShowLineWidth.value = true;
+			isShowOutlineColor.value = true;
+			isShowOutlineWidth.value = true;
+		} else if (params.id === DrawTools.DrawType.Polygon) {
+			title.value = '贴地面编辑';
+			isShowColor.value = true;
+			isShowOutlineColor.value = true;
+			isShowOutlineWidth.value = true;
+		} else if (params.id === DrawTools.DrawType.Rectangle) {
+			title.value = '矩形编辑';
+			isShowColor.value = true;
+			isShowOutlineColor.value = true;
+			isShowOutlineWidth.value = true;
+		} else if (params.id === DrawTools.DrawType.SpatialLine) {
+			title.value = '空间线编辑';
+			isShowColor.value = true;
+			isShowLineWidth.value = true;
+		} else if (params.id === DrawTools.DrawType.OdLine) {
+			title.value = 'OD线编辑';
+			isShowSpeed.value = true;
+			isShowColor.value = true;
+			isShowLineWidth.value = true;
+			isShowOrder.value = true;
+			isShowArcHeight.value = true;
+		} else {
+			_setShowControls(false);
+		}
+		color.value = params.color;
+		/* 判断方向及顺序 */
+		if (params.direction === 'horizontal') {
+			radioDirection.value = directions[0].key;
+			Object.assign(orders, [{
+				key: '自左至右',
+				value: '-'
+			}, {
+				key: '自右至左',
+				value: '+'
+			}]);
+			if (params.order === '-') {
+				radioOrder.value = orders[0].key;
+			} else {
+				radioOrder.value = orders[1].key;
+			}
+		} else {
+			radioDirection.value = directions[1].key;
+			Object.assign(orders, [{
+				key: '自上至下',
+				value: '+'
+			}, {
+				key: '自下至上',
+				value: '-'
+			}]);
+			if (params.order === '+') {
+				radioOrder.value = orders[0].key;
+			} else {
+				radioOrder.value = orders[1].key;
+			}
+		}
+		/* 单独更改 */
+		if (params.id === DrawTools.DrawType.OdLine) {
+			Object.assign(orders, [{
+				key: '汇聚',
+				value: '+'
+			}, {
+				key: '扩散',
+				value: '-'
+			}]);
+			if (params.order === '+') {
+				radioOrder.value = orders[0].key;
+			} else {
+				radioOrder.value = orders[1].key;
+			}
+		}
+		wallHeight.value = parseFloat(params.height).toFixed(2);
+		yCount.value = params.count;
+		txtContent.value = params.text;
+		lineWidth.value = params.lineWidth;
+		glowPower.value = params.power;
+		outlineColor.value = params.outlineColor;
+		outlineWidth.value = params.outlineWidth;
+		speed.value = (parseFloat(params.duration) / 1000).toFixed(2);
+		txtVideoUrl.value = params.videoUrl;
+		arcHeight.value = params.odlineHeight;
+		axisX.value = params.axisX;
+		axisY.value = params.axisY;
+		axisZ.value = params.axisZ;
+		// console.log('===设置参数显示>>>', params.lineWidth);
+	}
+
+	/**
+	 * 显示控件设置
+	 * @param {Boolean} isShow 是否显示
+	 */
+	function _setShowControls(isShow) {
+		isShowColor.value = isShow;
+		isShowText.value = isShow;
+		isShowDirection.value = isShow;
+		isShowOrder.value = isShow;
+		isShowCount.value = isShow;
+		isShowHeight.value = isShow;
+		isShowLineWidth.value = isShow;
+		isShowGlowpower.value = isShow;
+		isShowOutlineColor.value = isShow;
+		isShowOutlineWidth.value = isShow;
+		isShowSpeed.value = isShow;
+		isShowVideoUrl.value = isShow;
+		isShowArcHeight.value = isShow;
+		isShowAxis.value = isShow;
+	}
+
+	/**
+	 * 对外部公开的函数
+	 */
+	defineExpose({
+		// updateParams
+	});
+
+	/**
+	 * 提交更改
+	 */
+	function submit() {
+		let outParam = proxy._params;
+		outParam.height = wallHeight.value;
+		outParam.color = color.value;
+		outParam.direction = directions.filter(item => {
+			return item.key === radioDirection.value;
+		})[0].value;
+		outParam.order = orders.filter(item => {
+			return item.key === radioOrder.value;
+		})[0].value;
+		outParam.count = yCount.value;
+		outParam.text = txtContent.value;
+		outParam.lineWidth = lineWidth.value;
+		outParam.power = glowPower.value;
+		outParam.outlineColor = outlineColor.value;
+		outParam.outlineWidth = outlineWidth.value;
+		outParam.duration = speed.value * 1000;
+		outParam.videoUrl = txtVideoUrl.value;
+		outParam.odlineHeight = arcHeight.value;
+		outParam.bottomHeight = props.params.bottomHeight;
+		outParam.axisX = axisX.value;
+		outParam.axisY = axisY.value;
+		outParam.axisZ = axisZ.value;
+		emit('submit', outParam);
+		dialogVisible.value = false;
+	}
+
+	/**
+	 * 提交删除
+	 */
+	function remove() {
+		emit('remove', {});
+		dialogVisible.value = false;
+	}
+
+	/**
+	 * 材质方向选择事件
+	 * @param {Object} e
+	 */
+	function directionChange(e) {
+		if (e.target.value === directions[0].key) {
+			Object.assign(orders, [{
+				key: '自左至右',
+				value: '-'
+			}, {
+				key: '自右至左',
+				value: '+'
+			}]);
+			radioOrder.value = orders[0].key;
+		} else if (e.target.value === directions[1].key) {
+			Object.assign(orders, [{
+				key: '自上至下',
+				value: '-'
+			}, {
+				key: '自下至上',
+				value: '+'
+			}]);
+			radioOrder.value = orders[0].key;
+		}
+	}
+
+	/**
+	 * 窗口关闭，修改双向绑定值
+	 */
+	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';
+
+	/* 墙对话框内容行样式 */
+	.jt-wall-row {
+		display: flex;
+		flex-direction: row;
+		height: 40px;
+		align-items: center;
+
+		/* 行左侧标题样式 */
+		.col-left {
+			display: flex;
+			align-items: center;
+			justify-content: right;
+			width: 60px;
+			font-family: 'Alimama_ShuHeiTi_Bold';
+			font-weight: bold;
+			margin-right: 8px;
+		}
+
+		/* 主要内容样式 */
+		.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-wall-dialog {
+		pointer-events: none; // ***覆盖层元素增加可穿透点击事件***
+
+		.el-dialog {
+			pointer-events: auto; // ***弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）***
+			position: absolute !important; //将通知框的position改成absolute，可以在某个div进行显示
+
+			background: rgb(5 45 155 / 70%);
+			min-width: 280px;
+			overflow: hidden;
+
+			margin-top: 0px;
+
+			/* 对话框标题头样式 */
+			.el-dialog__header {
+				background: url('./image/backheader.png') no-repeat;
+				margin-right: 0px;
+				padding: 6px;
+			}
+
+			/* 对话框关闭按钮的样式 */
+			.el-dialog__headerbtn {
+				height: 34px;
+			}
+
+			/* 对话框主体的样式 */
+			.el-dialog__body {
+				padding: 10px;
+				color: #fff;
+			}
+
+			/* 颜色选择器的宽度 */
+			.el-color-picker__trigger {
+				width: 120px;
+			}
+
+			.el-body-foot {
+				position: absolute;
+				bottom: 8px;
+				right: 8px;
+			}
+		}
+	}
+</style>