|
|
@@ -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>
|
不会爬树的猴
