You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1088 lines
32 KiB
1088 lines
32 KiB
<template>
|
|
<qz-dialog :title="title" :visible.sync="visible" top="6vh" width="1200px">
|
|
<el-card
|
|
class="box-card"
|
|
style="margin-top: 2vh; background-color: #017cc4"
|
|
>
|
|
<span v-if="dataForm.applyType == ''" style="color: red"
|
|
>请先选择屏幕尺寸，以方便查看具体预览</span
|
|
>
|
|
<span style="color: red; margin-left: 20px"
|
|
>使用"#"作为占位符号,例如：前方#公里出现交通事故，请减速慢行</span
|
|
>
|
|
<div
|
|
style="
|
|
background-color: #000000;
|
|
color: yellow;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
"
|
|
v-on:ondragenter="ondragenter"
|
|
v-on:drop="faceDrop"
|
|
v-on:dragover="allowDrop"
|
|
v-bind:style="divStyle"
|
|
>
|
|
<div
|
|
v-for="(res, index) in templateContent"
|
|
:key="index"
|
|
v-drag
|
|
@click="cliTest(res)"
|
|
:id="index"
|
|
v-model="templateContent"
|
|
style="line-height: 1; position: absolute; white-space: nowrap"
|
|
:class="{ previewContentCSS: ispreviewContent == index }"
|
|
:style="{
|
|
color: res.fontColor,
|
|
fontSize: res.fontSize + 'px',
|
|
fontFamily: res.fontType,
|
|
letterSpacing: res.fontSpacing + 'px',
|
|
left: res.coordinate.substring(0, 3) + 'px',
|
|
top: res.coordinate.substring(3, 6) + 'px',
|
|
zIndex: '1000',
|
|
}"
|
|
v-html="res.content"
|
|
></div>
|
|
<div
|
|
v-for="(item, i) in templateContent"
|
|
:key="i"
|
|
v-if="item.img != ''"
|
|
:id="i"
|
|
v-drag
|
|
@click="cliTest(item)"
|
|
:class="{ previewContentCSS: ispreviewContent == i }"
|
|
v-model="templateContent"
|
|
style="line-height: 1; position: absolute"
|
|
:style="{
|
|
left: item.coordinate.substring(0, 3) + 'px',
|
|
top: item.coordinate.substring(3, 6) + 'px',
|
|
}"
|
|
>
|
|
<img
|
|
:src="isAdd ? item.img : item.imageName"
|
|
alt=""
|
|
@click="del(item)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card>
|
|
<el-form
|
|
:model="dataForm"
|
|
:rules="dataRule"
|
|
label-width="90px"
|
|
ref="dataForm"
|
|
size="mini"
|
|
>
|
|
<el-row :gutter="24">
|
|
<el-col :span="6">
|
|
<el-form-item prop="screenSize" label="屏幕尺寸">
|
|
<el-select
|
|
@change="resolvingPowerType"
|
|
v-model="dataForm.screenSize"
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in screenSizeOptions"
|
|
:key="item.type"
|
|
:label="item.type"
|
|
:value="item.type"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="13">
|
|
<el-form-item prop="contentPosition" label="内容位置">
|
|
<el-button-group v-model="dataForm.contentPosition">
|
|
<el-button @click="alignment('1')" size="small"
|
|
>左对齐</el-button
|
|
>
|
|
<el-button @click="alignment('2')" size="small"
|
|
>左右对齐</el-button
|
|
>
|
|
<el-button @click="alignment('3')" size="small"
|
|
>右对齐</el-button
|
|
>
|
|
<el-button @click="alignment('4')" size="small"
|
|
>上对齐</el-button
|
|
>
|
|
<el-button @click="alignment('5')" size="small"
|
|
>上下对齐</el-button
|
|
>
|
|
<el-button @click="alignment('6')" size="small"
|
|
>下对齐</el-button
|
|
>
|
|
</el-button-group>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="2">
|
|
<el-button type="primary" @click="addTemplateContent"
|
|
>新增</el-button
|
|
>
|
|
</el-col>
|
|
<!-- <el-col :span="2">-->
|
|
<!-- <el-button type="primary" @click="chooseImageEvent()"-->
|
|
<!-- >选择图片</el-button-->
|
|
<!-- >-->
|
|
<!-- </el-col>-->
|
|
</el-row>
|
|
<!-- 选择图片弹出框开始 -->
|
|
<qz-dialog
|
|
title="选择图片"
|
|
:visible.sync="dialogVisible"
|
|
:before-close="close"
|
|
top="6vh"
|
|
width="1100px"
|
|
:modal="false"
|
|
append-to-body
|
|
>
|
|
<!-- 选择图片内容区域开始 -->
|
|
<div class="changeImage">
|
|
<el-row style="padding-left: 60px">
|
|
<el-checkbox-group v-model="checkList">
|
|
<el-col
|
|
:span="8"
|
|
v-for="(item, index) in imgUrl"
|
|
:key="index"
|
|
style="margin-top: 12px"
|
|
>
|
|
<el-checkbox :label="item.pictureUrl">
|
|
<div class="photo">
|
|
<img
|
|
:src="item.pictureUrl"
|
|
@dblclick="dblEvent(item.pictureUrl)"
|
|
draggable="true"
|
|
v-on:dragstart="faceImagedragg($event, item)"
|
|
/>
|
|
</div>
|
|
</el-checkbox>
|
|
</el-col>
|
|
</el-checkbox-group>
|
|
</el-row>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button size="small" @click="close">{{
|
|
$t("cancel")
|
|
}}</el-button>
|
|
<el-button
|
|
size="small"
|
|
@click="sendBtnEvent()"
|
|
type="primary"
|
|
v-loading="loading"
|
|
>{{ $t("confirm") }}</el-button
|
|
>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 选择图片内容区域结束 -->
|
|
</qz-dialog>
|
|
<!-- 选择图片弹出框结束 -->
|
|
<!-- <el-scrollbar style="height:15vh;width: 1130px">-->
|
|
<el-row
|
|
:gutter="24"
|
|
v-for="(res, index) in templateContent"
|
|
:key="index"
|
|
v-show="res.content != ''"
|
|
>
|
|
<el-col :span="22">
|
|
<el-form-item label="内容">
|
|
<el-input
|
|
type="textarea"
|
|
clearable
|
|
placeholder="内容"
|
|
v-model="res.content"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<el-button
|
|
type="danger"
|
|
icon="el-icon-delete"
|
|
@click="delTemplateContent(res)"
|
|
></el-button>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="fontColor" label="字体颜色">
|
|
<el-select
|
|
v-model="res.fontColor"
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in colorOptions"
|
|
:key="item.cssClass"
|
|
:label="item.dictLabel"
|
|
:value="item.cssClass"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="fontSize" label="字体大小">
|
|
<el-select v-model="res.fontSize" style="width: 100%">
|
|
<el-option
|
|
v-for="item in fontSizeOpt"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="fontType" label="字体类型">
|
|
<el-select v-model="res.fontType" filterable placeholder="请选择">
|
|
<el-option
|
|
v-for="item in fontTypeOptions"
|
|
:key="item.dictLabel"
|
|
:label="item.dictLabel"
|
|
:value="item.dictLabel"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="fontSpacing" label="字体间距">
|
|
<el-input-number
|
|
:min="0"
|
|
controls-position="right"
|
|
v-model="res.fontSpacing"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" v-show="templateContent.length > 1">
|
|
<el-divider></el-divider>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- </el-scrollbar>-->
|
|
<el-row :gutter="24">
|
|
<el-col :span="6">
|
|
<el-form-item prop="rollSpeed" label="滚动速度(毫秒)">
|
|
<!-- 毫秒 -->
|
|
<el-input-number
|
|
:min="0"
|
|
controls-position="right"
|
|
v-model="dataForm.rollSpeed"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="stopTime" label="停留时间(秒)">
|
|
<el-input-number
|
|
:min="0"
|
|
controls-position="right"
|
|
v-model="dataForm.stopTime"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="applyType" label="适用类型">
|
|
<!-- <el-input clearable
|
|
placeholder="适用类型"
|
|
v-model="dataForm.applyType"></el-input> -->
|
|
<el-select
|
|
v-model="dataForm.applyType"
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in applyTypeOptions"
|
|
:key="item.code"
|
|
:label="item.content"
|
|
:value="item.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="inScreenMode" label="入屏方式">
|
|
<el-select
|
|
v-model="dataForm.inScreenMode"
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in inScreenModeOptions"
|
|
:key="item.cssClass"
|
|
:label="item.dictLabel"
|
|
:value="item.cssClass"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="6">
|
|
<el-form-item prop="templateType" label="模板类型">
|
|
<el-select
|
|
v-model="dataForm.templateType"
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in isCurrencyOptions"
|
|
:key="item.code"
|
|
:label="item.content"
|
|
:value="item.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="vmsType" label="情报板类型">
|
|
<el-input
|
|
clearable
|
|
placeholder="情报板类型"
|
|
v-model="dataForm.vmsType"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="isCurrency" label="模板模式">
|
|
<el-select
|
|
v-model="dataForm.isCurrency"
|
|
filterable
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in isCurrencyOptions"
|
|
:key="item.code"
|
|
:label="item.content"
|
|
:value="item.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item prop="remark" label="备注">
|
|
<el-input
|
|
clearable
|
|
placeholder="备注"
|
|
v-model="dataForm.remark"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="24">
|
|
<el-form-item prop="picSize"
|
|
label="图片大小">
|
|
<el-select v-model="dataForm.imgSizeFrom"
|
|
size='mini'
|
|
filterable
|
|
placeholder="请选择"
|
|
style="width: 173px;">
|
|
<el-option v-for="item,index in imgSize"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="item.type">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
</el-row>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<template slot="footer">
|
|
<el-button size="small" @click="visible = false">{{
|
|
$t("cancel")
|
|
}}</el-button>
|
|
<el-button
|
|
size="small"
|
|
@click="dataFormSubmitHandle()"
|
|
type="primary"
|
|
v-loading="loading"
|
|
>{{ $t("confirm") }}
|
|
</el-button>
|
|
</template>
|
|
</qz-dialog>
|
|
</template>
|
|
<script>
|
|
// import * as api from "./api";
|
|
// import util from "@/libs/util";
|
|
|
|
// import { saveContentsList } from "./api";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
applyTypeOptions: [],
|
|
fontSizeOpt: [],
|
|
fontTypeOptions: [],
|
|
checkList: [], //复选框一组
|
|
obj: "",
|
|
imgUrl: [],
|
|
imgUrlOther: [],
|
|
dialogVisible: false, //选择图片
|
|
fileList: [
|
|
{
|
|
name: "food.jpeg",
|
|
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
|
},
|
|
{
|
|
name: "food2.jpeg",
|
|
url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
|
},
|
|
],
|
|
listquery: [], //拖拽图片
|
|
curDragImgItem: "",
|
|
visible: false,
|
|
startTxt_x: "000",
|
|
startTxt_y: "000",
|
|
width: "1024",
|
|
height: "128",
|
|
content: "",
|
|
fontColor: "yellow",
|
|
fontSize: "24",
|
|
fontType: "KaiTi",
|
|
fontSpacing: 0,
|
|
coordinate: "000000",
|
|
url: "",
|
|
previewContent: "", //预览内容
|
|
ispreviewContent: -1,
|
|
dataForm: {
|
|
id: "",
|
|
screenSize: "1024*128",
|
|
inScreenMode: "",
|
|
rollSpeed: undefined,
|
|
stopTime: undefined,
|
|
applyType: "",
|
|
isCurrency: "",
|
|
templateType: "",
|
|
vmsType: "",
|
|
createby: "",
|
|
createtime: "",
|
|
updateby: "",
|
|
updatetime: "",
|
|
remark: "",
|
|
imgSizeFrom: "", //尺寸大小
|
|
},
|
|
templateContent: [],
|
|
screenSizeOptions: [
|
|
{
|
|
type: "144*72",
|
|
},
|
|
{
|
|
type: "768*72",
|
|
},
|
|
{
|
|
type: "320*32",
|
|
},
|
|
{
|
|
type: "384*32",
|
|
},
|
|
{
|
|
type: "1024*128",
|
|
},
|
|
{
|
|
type: "480*48",
|
|
},
|
|
{
|
|
type: "480*72",
|
|
},
|
|
{
|
|
type: "880*80",
|
|
},
|
|
],
|
|
colorOptions: [
|
|
// {
|
|
// code: "red",
|
|
// content: "红色",
|
|
// },
|
|
// {
|
|
// code: "yellow",
|
|
// content: "黄色",
|
|
// },
|
|
// {
|
|
// code: "White",
|
|
// content: "白色",
|
|
// },
|
|
// {
|
|
// code: "#00FF00",
|
|
// content: "绿色",
|
|
// },
|
|
],
|
|
isCurrencyOptions: [
|
|
{
|
|
code: "0",
|
|
content: "通用",
|
|
},
|
|
{
|
|
code: "1",
|
|
content: "仅为智能推荐模板",
|
|
},
|
|
],
|
|
inScreenModeOptions: [
|
|
// {
|
|
// code: "0",
|
|
// name: "清屏（全黑)",
|
|
// },
|
|
// {
|
|
// code: "1",
|
|
// name: "立即显示",
|
|
// },
|
|
// {
|
|
// code: "2",
|
|
// name: "上移",
|
|
// },
|
|
// {
|
|
// code: "3",
|
|
// name: "下移",
|
|
// },
|
|
// {
|
|
// code: "4",
|
|
// name: "左移",
|
|
// },
|
|
// {
|
|
// code: "5",
|
|
// name: "右移",
|
|
// },
|
|
// {
|
|
// code: "6",
|
|
// name: "横百叶窗",
|
|
// },
|
|
// {
|
|
// code: "7",
|
|
// name: "竖百叶窗",
|
|
// },
|
|
// {
|
|
// code: "8",
|
|
// name: "上下合拢",
|
|
// },
|
|
// {
|
|
// code: "9",
|
|
// name: "上下展开",
|
|
// },
|
|
// {
|
|
// code: "10",
|
|
// name: "左右合拢",
|
|
// },
|
|
// {
|
|
// code: "11",
|
|
// name: "左右展开",
|
|
// },
|
|
// {
|
|
// code: "12",
|
|
// name: "中心合拢",
|
|
// },
|
|
// {
|
|
// code: "13",
|
|
// name: "中心展开",
|
|
// },
|
|
// {
|
|
// code: "14",
|
|
// name: "向下马赛克",
|
|
// },
|
|
// {
|
|
// code: "15",
|
|
// name: "向右马赛克",
|
|
// },
|
|
// {
|
|
// code: "16",
|
|
// name: "淡入",
|
|
// },
|
|
// {
|
|
// code: "17",
|
|
// name: "淡出",
|
|
// },
|
|
// {
|
|
// code: "18",
|
|
// name: "字符闪烁（闪后消失）",
|
|
// },
|
|
// {
|
|
// code: "19",
|
|
// name: "字符闪烁（闪后停留）",
|
|
// },
|
|
// {
|
|
// code: "20",
|
|
// name: "区域闪烁（闪后复原）",
|
|
// },
|
|
// {
|
|
// code: "21",
|
|
// name: "区域闪烁（闪后区域为黑）",
|
|
// },
|
|
],
|
|
imgSize: [
|
|
{
|
|
type: "1024*128",
|
|
name: "全屏",
|
|
},
|
|
{
|
|
type: "",
|
|
name: "正常",
|
|
},
|
|
],
|
|
title: "选择图片",
|
|
loading: false,
|
|
isAdd: false,
|
|
};
|
|
},
|
|
directives: {
|
|
drag: function (el, binding, vnode) {
|
|
let that = vnode.context;
|
|
let dragBox = el;
|
|
dragBox.onmousedown = (e) => {
|
|
// that.startTxt_x = dragBox.style.left.substring (0, dragBox.style.left.length - 2)
|
|
// that.startTxt_y = dragBox.style.left.substring (0, dragBox.style.top.length - 2)
|
|
let disX = e.clientX - dragBox.offsetLeft;
|
|
let disY = e.clientY - dragBox.offsetTop;
|
|
let clientHeight = dragBox.clientHeight;
|
|
let clientWidth = dragBox.clientWidth;
|
|
document.onmousemove = function (e) {
|
|
//鼠标移动触发事件，元素移到对应为位置
|
|
let left = e.pageX - disX;
|
|
let top = e.pageY - disY;
|
|
//限制区域
|
|
if (left <= 0) {
|
|
left = 0;
|
|
} else if (that.width - left - clientWidth <= 0) {
|
|
left = that.width - clientWidth;
|
|
}
|
|
if (top <= 0) {
|
|
top = 0;
|
|
} else if (that.height - top - clientHeight <= 0) {
|
|
top = that.height - clientHeight;
|
|
}
|
|
dragBox.style.left = left + "px";
|
|
dragBox.style.top = top + "px";
|
|
let a = (Array(3).join("0") + parseInt(left)).slice(-3);
|
|
let b = (Array(3).join("0") + parseInt(top)).slice(-3);
|
|
that.templateContent[dragBox.id].coordinate = a + b;
|
|
};
|
|
document.onmouseup = function () {
|
|
//鼠标抬起，清除绑定的事件，元素放置在对应的位置
|
|
document.onmousemove = null;
|
|
document.onmousedown = null;
|
|
};
|
|
e.preventDefault(); //阻止浏览器的默认事件
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
dataRule() {
|
|
return {
|
|
isCurrency: [
|
|
{//模板模式
|
|
required: true,
|
|
message: this.$t("validate.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
rollSpeed: [
|
|
//滚动速度
|
|
{
|
|
required: true,
|
|
message: this.$t("validate.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
stopTime: [
|
|
//停留时间
|
|
{
|
|
required: true,
|
|
message: this.$t("validate.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
inScreenMode: [
|
|
//入屏方式
|
|
{
|
|
required: true,
|
|
message: this.$t("validate.required"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
divStyle: function () {
|
|
return {
|
|
width: this.width + "px",
|
|
height: this.height + "px",
|
|
};
|
|
},
|
|
},
|
|
watch: {
|
|
templateContent: {
|
|
deep: true,
|
|
handler: function (newValue, oldValue) {
|
|
// this.templateContent=newValue
|
|
var vm = this;
|
|
let inrex = [];
|
|
for (let index = vm.templateContent.length - 1; index >= 0; index--) {
|
|
if (
|
|
vm.templateContent[index].content == "" &&
|
|
(vm.templateContent[index].img == "" ||
|
|
vm.templateContent[index].imageName == "")
|
|
) {
|
|
inrex.push(index);
|
|
}
|
|
}
|
|
for (let index = 0; index < inrex.length; index++) {
|
|
vm.templateContent.splice(inrex[index], 1);
|
|
}
|
|
},
|
|
},
|
|
},
|
|
created() {
|
|
this.getDicts("vms_apply_type").then((data) => {
|
|
this.applyTypeOptions = data;
|
|
});
|
|
// this.getDicts("fontType").then((data) => {
|
|
// this.fontTypeOptions = data;
|
|
// });
|
|
this.getDicts("iot_device_font_type").then((res) => {
|
|
this.fontTypeOptions = res.data;
|
|
console.log(this.fontTypeOptions, "字体类型");
|
|
});
|
|
this.getDicts("iot_devices_font_color").then((res) => {
|
|
this.colorOptions = res.data;
|
|
console.log(this.colorOptions, "字体颜色");
|
|
});
|
|
this.getDicts("iot_device_font_size").then((res) => {
|
|
this.fontSizeOpt = res.data;
|
|
console.log(this.fontSizeOpt, "字体大小");
|
|
});
|
|
this.getDicts("iot_device_font_inScreen_mode").then((res) => {
|
|
this.inScreenModeOptions = res.data;
|
|
console.log(this.inScreenModeOptions, "入屏方式");
|
|
});
|
|
},
|
|
methods: {
|
|
init() {
|
|
// this.getDicts("fontSize").then((data) => {
|
|
// this.fontSizeOpt = data;
|
|
// });
|
|
this.title = !this.dataForm.id ? this.$t("add") : this.$t("update");
|
|
this.isAdd = !this.dataForm.id;
|
|
this.visible = true;
|
|
this.$nextTick(() => {
|
|
if (this.isAdd) {
|
|
this.$refs["dataForm"] && this.$refs["dataForm"].resetFields();
|
|
this.dataForm.id = "";
|
|
this.templateContent = [];
|
|
this.width = "1024";
|
|
this.height = "128";
|
|
this.templateContent.push({
|
|
content: "请输入内容",
|
|
fontColor: "yellow",
|
|
fontSize: "24",
|
|
fontType: "KaiTi",
|
|
fontSpacing: 0,
|
|
coordinate: "000000",
|
|
img: "",
|
|
});
|
|
} else {
|
|
this.getInfo();
|
|
this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
|
|
}
|
|
});
|
|
},
|
|
del(index) {
|
|
this.obj = index;
|
|
var _this = this;
|
|
document.onkeydown = function (e) {
|
|
let key = window.event.keyCode;
|
|
if (_this.obj != "") {
|
|
if (key == 46 || key == 8) {
|
|
let inx = "";
|
|
for (let index = 0; index < _this.templateContent.length; index++) {
|
|
if (_this.templateContent[index] == _this.obj) {
|
|
inx = index;
|
|
}
|
|
}
|
|
_this.templateContent.splice(inx, 1);
|
|
_this.obj = "";
|
|
} else {
|
|
_this.obj = "";
|
|
}
|
|
}
|
|
};
|
|
},
|
|
// 选择图片按钮
|
|
chooseImageEvent() {
|
|
this.imgUrl = [];
|
|
this.getImageInfo();
|
|
this.dialogVisible = true;
|
|
},
|
|
//选择图片弹框关闭事件
|
|
close() {
|
|
this.checkList = [];
|
|
this.dialogVisible = false;
|
|
},
|
|
// 图片双击事件
|
|
dblEvent(item) {
|
|
if (this.templateContent.length > 7) {
|
|
this.$message.error("最多只能添加七条信息！");
|
|
return;
|
|
}
|
|
this.templateContent.push({
|
|
content: "",
|
|
fontColor: null,
|
|
fontSize: null,
|
|
fontType: null,
|
|
fontSpacing: 0,
|
|
coordinate: "000000",
|
|
img: item,
|
|
imageName: item,
|
|
});
|
|
this.checkList = [];
|
|
this.dialogVisible = false;
|
|
},
|
|
// 选择图片点击确定按钮
|
|
sendBtnEvent() {
|
|
if (this.templateContent.length > 7) {
|
|
this.$message.error("最多只能添加七条信息！");
|
|
return;
|
|
}
|
|
if (this.checkList.length > 1) {
|
|
this.$message.error("每次只能选择一张图片！");
|
|
return;
|
|
}
|
|
if (this.checkList.length > 0) {
|
|
for (var i = 0; i < this.checkList.length; i++)
|
|
this.templateContent.push({
|
|
content: "",
|
|
fontColor: null,
|
|
fontSize: null,
|
|
fontType: null,
|
|
fontSpacing: 0,
|
|
coordinate: "000000",
|
|
img: this.checkList[i],
|
|
});
|
|
|
|
this.checkList = [];
|
|
} else {
|
|
this.$message.error("请选择您要添加的图片！");
|
|
return;
|
|
}
|
|
this.dialogVisible = false;
|
|
},
|
|
// 选择图片弹框拖动图片
|
|
faceImagedragg(event, item) {
|
|
this.curDragImgItem = item; //拖动存储该图片信息
|
|
},
|
|
faceDrop(e) {
|
|
e.preventDefault(); //阻止默认行为
|
|
this.listquery.push(this.curDragImgItem);
|
|
},
|
|
// 全选
|
|
allowDrop(e) {
|
|
e.preventDefault(); //阻止默认行为
|
|
},
|
|
ondragenter(e) {
|
|
e.preventDefault(); //阻止默认行为
|
|
},
|
|
// 获取信息
|
|
getInfo() {
|
|
api.info(this.dataForm.id).then((data) => {
|
|
this.dataForm = data;
|
|
this.dataForm.isCurrency = this.dataForm.isCurrency + "";
|
|
if (this.dataForm.templateType != null) {
|
|
this.dataForm.templateType = this.dataForm.templateType + "";
|
|
}
|
|
this.width = this.dataForm.screenSize.split("*")[0];
|
|
this.height = this.dataForm.screenSize.split("*")[1];
|
|
});
|
|
api.getTemplateContentById(this.dataForm.id).then((data) => {
|
|
this.templateContent = data;
|
|
console.log(this.templateContent,"this.templateContent");
|
|
if (this.templateContent.length == 0) {
|
|
this.templateContent.push({
|
|
content: "",
|
|
fontColor: "yellow",
|
|
fontSize: "24",
|
|
fontType: "KaiTi",
|
|
fontSpacing: 0,
|
|
coordinate: "000000",
|
|
img: "",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 表单提交
|
|
async dataFormSubmitHandle() {
|
|
let valid = await this.$refs.dataForm.validate().catch(() => {
|
|
return util.$message.showInfo2("校验错误");
|
|
});
|
|
if (!valid) return;
|
|
this.loading = true;
|
|
let templateId = "";
|
|
let method = !this.isAdd ? "put" : "post";
|
|
if (this.isAdd) {
|
|
await api.save(this.dataForm, method).then((data) => {
|
|
templateId = data;
|
|
});
|
|
let params = {
|
|
templateContent: this.templateContent,
|
|
templateId: templateId,
|
|
};
|
|
api.saveContentsList(params).catch((err) => {
|
|
throw err;
|
|
});
|
|
} else {
|
|
await api.save(this.dataForm, method).then((data) => {});
|
|
this.templateContent.forEach((e) => {
|
|
e.img = e.imageName;
|
|
});
|
|
let params = {
|
|
templateContent: this.templateContent,
|
|
templateId: this.dataForm.id,
|
|
};
|
|
await api.delContent(this.dataForm.id).catch((err) => {
|
|
throw err;
|
|
});
|
|
await api.saveContentsList(params).catch((err) => {
|
|
throw err;
|
|
});
|
|
}
|
|
|
|
this.loading = false;
|
|
this.visible = false;
|
|
this.isAdd = false;
|
|
this.$emit("refreshDataList", this.dataForm);
|
|
},
|
|
/*********************************************业务代码***********************************************/
|
|
//文字对齐方式
|
|
alignment(alignmentNum) {
|
|
let that = this;
|
|
let boardSize = this.dataForm.screenSize;
|
|
if (!boardSize || boardSize === "") {
|
|
boardSize = "768*72";
|
|
}
|
|
let width = boardSize.split("*")[0];
|
|
let height = boardSize.split("*")[1];
|
|
//获取内容
|
|
let contentWidth = document.getElementById("templateDivText").offsetWidth;
|
|
let contentHeight =
|
|
document.getElementById("templateDivText").offsetHeight;
|
|
switch (alignmentNum) {
|
|
case "1":
|
|
this.startTxt_x = "000";
|
|
break;
|
|
case "2":
|
|
this.startTxt_x = this.formatNum(
|
|
(width - contentWidth) / 2 < 0 ? 0 : (width - contentWidth) / 2,
|
|
3
|
|
);
|
|
break;
|
|
case "3":
|
|
this.startTxt_x = this.formatNum(
|
|
width - contentWidth <= 0 ? 0 : width - contentWidth,
|
|
3
|
|
);
|
|
break;
|
|
case "4":
|
|
this.startTxt_y = "000";
|
|
break;
|
|
case "5":
|
|
this.startTxt_y = this.formatNum(
|
|
(height - contentHeight) / 2 < 0 ? 0 : (height - contentHeight) / 2,
|
|
3
|
|
);
|
|
break;
|
|
case "6":
|
|
this.startTxt_y = this.formatNum(
|
|
height - contentHeight <= 0 ? 0 : height - contentHeight,
|
|
3
|
|
);
|
|
break;
|
|
}
|
|
},
|
|
/* 拆分分辨率大小 */
|
|
resolvingPowerType(data) {
|
|
let a = [];
|
|
a = data.split("*");
|
|
this.width = a[0];
|
|
this.height = a[1];
|
|
},
|
|
/*增加新的内容*/
|
|
addTemplateContent() {
|
|
if (this.templateContent.length >= 7) {
|
|
this.$message.error("最多只能添加7条信息！");
|
|
return;
|
|
}
|
|
this.templateContent.push({
|
|
content: "请输入内容",
|
|
fontColor: "yellow",
|
|
fontSize: "24",
|
|
fontType: "KaiTi",
|
|
fontSpacing: 0,
|
|
coordinate: "000000",
|
|
img: "",
|
|
});
|
|
},
|
|
/*删除内容*/
|
|
delTemplateContent(data) {
|
|
console.log(data,"data");
|
|
for (let i = 0; i < this.templateContent.length; i++) {
|
|
if (
|
|
this.templateContent.indexOf(data) ==
|
|
this.templateContent.indexOf(this.templateContent[i])
|
|
) {
|
|
this.templateContent.splice(this.templateContent.indexOf(data), 1);
|
|
}
|
|
}
|
|
},
|
|
cliTest(data) {
|
|
this.ispreviewContent = this.templateContent.indexOf(data);
|
|
},
|
|
/********************图片上传*********************/
|
|
handleRemove(file, fileList) {},
|
|
handlePreview(file) {},
|
|
handleExceed(files, fileList) {
|
|
this.$message.warning(
|
|
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
|
files.length + fileList.length
|
|
} 个文件`
|
|
);
|
|
},
|
|
beforeRemove(file, fileList) {
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
},
|
|
|
|
/**
|
|
* 获取图片信息
|
|
*/
|
|
getImageInfo() {
|
|
let params = {
|
|
vmsSize: this.dataForm.screenSize,
|
|
};
|
|
api.queryImgInfo(params).then((data) => {
|
|
if (!data) {
|
|
return;
|
|
}
|
|
let list = data.sort((dataA, dataB) => {
|
|
dataA.id - dataB.id;
|
|
});
|
|
this.imgUrl.push(...list);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.previewContentCSS {
|
|
border: yellow 1px dashed;
|
|
}
|
|
/* 页脚 */
|
|
.dialog-footer {
|
|
padding-left: 450px;
|
|
}
|
|
.photoOther img,
|
|
.photo img {
|
|
max-width: 300px;
|
|
width: 100%;
|
|
// height: 80px;
|
|
}
|
|
</style>
|
|
|