mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix-

wangqin
IAMHERE 11 months ago
parent
ad813c1afa
commit
68e1c0ddf7
4 changed files with 2220 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 883
      ruoyi-ui/src/views/boardView/addinfo.vue
  2. 1
      ruoyi-ui/src/views/boardView/boardData.json
  3. 874
      ruoyi-ui/src/views/boardView/editInfo.vue
  4. 470
      ruoyi-ui/src/views/index.vue

883
ruoyi-ui/src/views/boardView/addinfo.vue
View File

@ -0,0 +1,883 @@
<template>
<div class="container infoBoardDialog">
<!-- 添加信息弹窗 -->
<el-dialog title="新增" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" :close-on-click-modal="false">
<div class="dialogStyleBox">
<div class="dialogLine"></div>
<div class="dialogCloseButton"></div>
</div>
<el-card class="box-card">
<div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
width: boardWidth + 'px',
height: boardHeight + 'px',
}" class="blackBoard2">
<span :style="{
color: getColorStyle(dataForm.COLOR),
fontSize: dataForm.FONT_SIZE,
fontFamily: dataForm.FONT,
zIndex: '1000',
left: dataForm.COORDINATE
? dataForm.COORDINATE.substring(0, 3) + 'px'
: '',
top: dataForm.COORDINATE
? dataForm.COORDINATE.substring(3, 6) + 'px'
: '',
maxHeight:boardHeight + 'px',
}" class="textBoard2 boardTextStyle" v-html="
dataForm.CONTENT
? dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
/ /g,
'&nbsp'
)
: ''
"></span>
</div>
</el-card>
<el-card>
<el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
<el-row :gutter="24" style="height: 45px;">
<el-col :span="8">
<el-form-item prop="category" label="所属类别" :rules="[
{
required: categoryRules ? true : false,
message: '请选择所属类别',
trigger: 'blur',
},
]" v-show="infoType == 2">
<el-select v-model="dataForm.category" placeholder="请选择所属类别" clearable size="mini">
<el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col class="infoBoardButton" :span="16">
<el-radio-group v-model="radio1" @input="alignment(radio1)">
<el-radio-button :label="1">左对齐</el-radio-button>
<el-radio-button :label="2">左右居中</el-radio-button>
<el-radio-button :label="3">右对齐</el-radio-button>
</el-radio-group>
<!-- <el-button type="primary" @click="alignment(1)" size="mini"
>左对齐</el-button
>
<el-button type="primary" @click="alignment(2)" size="mini"
>左右居中</el-button
>
<el-button type="primary" @click="alignment(3)" size="mini"
>右对齐</el-button
> -->
</el-col>
</el-row>
<!-- 选择图片弹出框结束 -->
<el-row :gutter="24" style="display: flex;
flex-wrap: wrap;width:100%">
<el-col :span="24">
<el-form-item label="详细内容" prop="CONTENT">
<el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="COLOR" label="字体颜色">
<el-select v-model="dataForm.COLOR" 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="8">
<el-form-item prop="FONT_SIZE" label="字体大小">
<el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
<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="8">
<el-form-item prop="FONT" label="字体类型">
<el-select v-model="dataForm.FONT" 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="8">
<el-form-item prop="STAY" label="停留时间(秒)">
<el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="ACTION" label="入屏方式">
<el-select v-model="dataForm.ACTION" filterable placeholder="请选择">
<el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="screenSize" label="屏幕尺寸">
<el-select v-model="dataForm.screenSize" filterable placeholder="请选择" v-if="!devicePixelBoolean">
<el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel" @click.native="changeScreenSize(item.device_pixel)">
</el-option>
</el-select>
<el-input disabled v-model="dataForm.screenSize" v-if="devicePixelBoolean"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button @click="dataFormSubmitHandle()" v-loading="loading" class="submitButton">确认
</el-button>
<el-button class="closeButton" @click="handleClose">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getTemplateInfo, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
import { devicessize } from '@/api/information/api.js'
import { checkIotBoardContent } from '@/api/board/vocabulary'
export default {
data() {
return {
radio1: 2,
alignmentNum: 2,
content: '',
boardWidth: '',
boardHeight: '',
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: '400',
height: '40',
// content: "",
fontColor: 'yellow',
fontSize: '24',
fontType: 'KaiTi',
fontSpacing: 0,
coordinate: '000000',
url: '',
previewContent: '', //预览内容
ispreviewContent: -1,
dataForm: {},
templateContent: [],
templateDelContent: [],
dataRule: {
screenSize: [
{
required: true,
message: '请选择分辨率',
trigger: 'blur'
}
],
CONTENT: [
{
required: true,
message: '请输入详细内容',
trigger: 'blur'
}
],
fontColor: [
{
required: true,
message: '请填写字体颜色',
trigger: 'blur'
}
],
fontSize: [
{
required: true,
message: '请填写字体大小',
trigger: 'blur'
}
],
fontType: [
{
required: true,
message: '请选择字体类型',
trigger: 'change'
}
],
fontSpacing: [
{
required: true,
message: '请选择字体间距',
trigger: 'change'
}
],
rollSpeed: [
{
required: true,
message: '请填写滚动速度',
trigger: 'blur'
}
],
stopTime: [
{
required: true,
message: '请填写停留时间',
trigger: 'blur'
}
],
inScreenMode: [
{
required: true,
message: '请选择入屏方式',
trigger: 'blur'
}
]
},
fontTypeOptions: [],
screenSizeOptions: [],
colorOptions: [],
isCurrencyOptions: [
{
code: '0',
content: '通用'
},
{
code: '1',
content: '仅为智能推荐模板'
}
],
inScreenModeOptions: [],
imgSize: [
{
type: '1024*128',
name: '全屏'
},
{
type: '',
name: '正常'
}
],
fontSizeOpt: [],
title: '选择图片',
loading: false,
isAdd: false,
iotTemplateCategoryList: [],
infoType: '',
devicePixelBoolean: false,
categoryRules: 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: {
divStyle: function () {
return {
width: this.width + 'px',
height: this.height + 'px'
}
}
},
watch: {
// "dataForm.CONTENT": {
// deep: true,
// handler: function (newValue, oldValue) {
// this.dataForm.content1 = newValue;
// },
// },
// 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);
// }
// },
// },
},
mounted() {
this.getDicts('iot_template_category').then(res => {
this.iotTemplateCategoryList = res.data
// console.log(this.iotTemplateCategoryList, "this.iotTemplateCategoryList");
})
},
created() {
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_inScreen_mode').then(res => {
this.inScreenModeOptions = res.data
// console.log(this.inScreenModeOptions, "入屏方式");
})
this.getdevicessize()
},
methods: {
init(devicePixel, type, mode) {
if (devicePixel) {
this.devicePixelBoolean = true
this.dataForm.screenSize = devicePixel
this.boardWidth = devicePixel.split('*')[0]
this.boardHeight = devicePixel.split('*')[1]
} else {
this.devicePixelBoolean = false
;(this.boardWidth = '400'), (this.boardHeight = '40')
}
// type 1:待下发信息 2:信息模板
// mode 1:工作台弹窗跳转 2：情报板管理跳转
this.infoType = type
if (mode == 1 || type == 1) {
this.categoryRules = false
} else {
this.categoryRules = true
}
// this.title = "新增";
this.isAdd = !this.dataForm.id
this.dialogVisible = true
this.templateDelContent = []
this.$nextTick(() => {
if (this.isAdd) {
this.$refs['dataForm'] && this.$refs['dataForm'].resetFields()
this.dataForm.id = ''
this.dataForm = {}
this.width = '400'
this.height = '40'
this.dataForm = {
CONTENT: '请输入内容',
COLOR: 'yellow',
FONT: '黑体',
SPEED: '1',
ACTION: '1',
// COORDINATE: "",
STATE: 'true',
STAY: '5',
screenSize: devicePixel
}
this.content = '请输入内容'
} else {
// this.getInfo();
// this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
}
})
if (this.dataForm.screenSize) {
this.getFontSizeList(1)
}
this.$forceUpdate()
},
getFontSizeList(type) {
this.getDicts('iot_device_font_size').then(res => {
this.fontSizeOpt = res.data
this.dataForm.FONT_SIZE = res.data[3].dictValue
if (type) {
this.alignment(2)
}
})
//TODO 测试数据 后期需转接口
/*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
console.log(res, "根据分辨率筛字体大小");
this.fontSizeOpt = res.data.fontSizeList;
this.dataForm.FONT_SIZE = res.data.defaultFont;
if(type){
this.alignment(2)
}
});*/
},
// 查分辨率
getdevicessize() {
//TODO 测试数据 需删除走接口
this.screenSizeOptions = [
{
device_pixel: '192*160'
},
{
device_pixel: '480*48'
},
{
device_pixel: '768*64'
}
]
// TODO 查分辨率接口
/*devicessize().then((res) => {
console.log(res, "查分辨率");
this.screenSizeOptions = res.data;
});*/
},
changeScreenSize(size) {
this.boardWidth = size.split('*')[0]
this.boardHeight = size.split('*')[1]
this.getFontSizeList()
this.$forceUpdate()
},
changeFontSize() {
console.log(this.dataForm.FONT_SIZE)
this.alignment(this.alignmentNum)
this.$forceUpdate()
},
keyDown(ev) {
this.alignment(this.alignmentNum)
},
//选择图片弹框关闭事件
close() {
this.checkList = []
this.dialogVisible = false
},
faceDrop(e) {
e.preventDefault() //阻止默认行为
this.listquery.push(this.curDragImgItem)
},
// 全选
allowDrop(e) {
e.preventDefault() //阻止默认行为
},
ondragenter(e) {
e.preventDefault() //阻止默认行为
},
// 获取信息
// getInfo() {
// getTemplateInfo(this.dataForm.id).then((data) => {
// this.dataForm = data.data;
// this.width = this.dataForm.screenSize.split("*")[0];
// this.height = this.dataForm.screenSize.split("*")[1];
// });
// getTemplateContent(this.dataForm.id).then((data) => {
// this.templateContent = data.rows;
// if (this.templateContent.length == 0) {
// this.templateContent.push({
// content: "",
// fontColor: "yellow",
// fontSize: "24",
// fontType: "KaiTi",
// fontSpacing: 0,
// coordinate: "000000",
// img: "",
// });
// }
// });
// },
// 表单提交
async dataFormSubmitHandle() {
this.alignment()
// let valid = await this.$refs.dataForm.validate().catch(() => {
// return this.$modal.msgError("校验错误");
// });
// if (!valid) return;
if (!this.dataForm.CONTENT.trim()) {
return this.$modal.msgError('当前输入内容为空')
} else if (!this.dataForm.category && this.infoType == 2) {
return this.$modal.msgError('情报板所属类别不能为空')
}
//走接口检验内容是否包含敏感字段
/*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
if (response.data == 0) {
return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
} else if (response.data == 2) {
return this.$modal.msgError('当前输入内容为空')
} else {
this.loading = true
// let templateId = "";
let method = 'put'
if (this.isAdd) {
if (this.infoType == 1) {
// 不走接口 存到待下发信息里
this.dataForm.STAY = Number(this.dataForm.STAY) * 100
this.$emit('addInfo', this.dataForm)
} else {
// 走接口 存到信息模板里
const params1 = {
applyType: '',
category: this.dataForm.category,
coordinate: '',
height: '',
id: '',
imageUrl: '',
imgSizeFrom: '',
inScreenMode: this.dataForm.ACTION,
remark: '',
screenSize: this.dataForm.screenSize,
stopTime: Number(this.dataForm.STAY) * 100,
vmsType: '',
width: ''
}
const templateContent = []
templateContent.push({
content: this.dataForm.CONTENT,
coordinate: this.dataForm.COORDINATE,
fontColor: this.getColorStyle(this.dataForm.COLOR),
fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
fontSpacing: this.dataForm.SPEED,
fontType: this.getFontStyle(this.dataForm.FONT)
})
// this.$emit("addInfoMode", this.dataForm);
addTemplate(params1, method).then(data => {
console.log(data, '新增口')
let params2 = {
templateContent: templateContent,
templateId: data
}
addTemplateContent(params2)
.then(res => {
if (res.code == 200) {
this.$emit('getActiveNames')
this.$message.success('添加成功')
}
})
.catch(err => {
throw err
})
})
}
} else {
// // 修改
// editTemplate(this.dataForm).then((data) => {});
// this.templateContent.forEach((e) => {
// e.img = e.imageName;
// });
// var params = {
// templateContent: this.templateContent,
// templateId: this.dataForm.id,
// templateDelContent: this.templateDelContent,
// };
// editTemplateContent(params).then((response) => {
// // console.log(response, "返回结果");
// });
}
this.loading = false
this.dialogVisible = false
this.isAdd = false
this.$emit('refreshDataList', this.dataForm)
var textBoard2 = document.getElementsByClassName('textBoard2')
textBoard2[0].style.position = 'absolute'
}
})*/
this.loading = true
// let templateId = "";
let method = 'put'
if (this.isAdd) {
if (this.infoType == 1) {
// 不走接口 存到待下发信息里
this.dataForm.STAY = Number(this.dataForm.STAY) * 100
this.$emit('addInfo', this.dataForm)
} else {
// 走接口 存到信息模板里
const params1 = {
applyType: '',
category: this.dataForm.category,
coordinate: '',
height: '',
id: '',
imageUrl: '',
imgSizeFrom: '',
inScreenMode: this.dataForm.ACTION,
remark: '',
screenSize: this.dataForm.screenSize,
stopTime: Number(this.dataForm.STAY) * 100,
vmsType: '',
width: ''
}
const templateContent = []
templateContent.push({
content: this.dataForm.CONTENT,
coordinate: this.dataForm.COORDINATE,
fontColor: this.getColorStyle(this.dataForm.COLOR),
fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
fontSpacing: this.dataForm.SPEED,
fontType: this.getFontStyle(this.dataForm.FONT)
})
// this.$emit("addInfoMode", this.dataForm);
addTemplate(params1, method).then(data => {
console.log(data, '新增口')
let params2 = {
templateContent: templateContent,
templateId: data
}
addTemplateContent(params2)
.then(res => {
if (res.code == 200) {
this.$emit('getActiveNames')
this.$message.success('添加成功')
}
})
.catch(err => {
throw err
})
})
}
} else {
// // 修改
// editTemplate(this.dataForm).then((data) => {});
// this.templateContent.forEach((e) => {
// e.img = e.imageName;
// });
// var params = {
// templateContent: this.templateContent,
// templateId: this.dataForm.id,
// templateDelContent: this.templateDelContent,
// };
// editTemplateContent(params).then((response) => {
// // console.log(response, "返回结果");
// });
}
this.loading = false
this.dialogVisible = false
this.isAdd = false
this.$emit('refreshDataList', this.dataForm)
var textBoard2 = document.getElementsByClassName('textBoard2')
textBoard2[0].style.position = 'absolute'
},
/*********************************************业务代码***********************************************/
getFontStyle(font) {
if (font == '宋体') {
return 'Simsun'
} else if (font == '黑体') {
return 'SimHei'
} else if (font == '楷体') {
return 'KaiTi'
} else if (font == '仿宋') {
return 'FangSong'
} else if (font == '隶书') {
return 'LiSu'
}
},
getColorStyle(font) {
if (font == '黄色') {
return 'yellow'
} else if (font == '红色') {
return 'red'
} else if (font == '绿色' || font == 'GreenYellow') {
return '#00FF00'
} else if (font == '蓝色') {
return 'blue'
} else {
return font
}
},
// 文字对齐方式
alignment(alignmentNum) {
this.alignmentNum = alignmentNum
var divContent2 = document.getElementsByClassName('blackBoard2')
var textBoard2 = document.getElementsByClassName('textBoard2')
// 获取文字长宽
// let textWidth = textBoard2[0].offsetWidth;
// let textHeight = textBoard2[0].offsetHeight;
// // 获取黑盒子长宽
// let divWidth = divContent2[0].offsetWidth;
// let divHeight = divContent2[0].offsetHeight;
// var args = [...divContent2];
switch (alignmentNum) {
// 左对齐
case 1:
divContent2[0].style.justifyContent = 'left'
divContent2[0].style.alignItems = 'center'
// textBoard2[0].style.textAlign = "left";
textBoard2[0].style.position = 'static'
break
// 左右居中
case 2:
divContent2[0].style.justifyContent = 'center'
divContent2[0].style.alignItems = 'center'
// textBoard2[0].style.textAlign = "center";
textBoard2[0].style.position = 'static'
break
// 右对齐
case 3:
divContent2[0].style.justifyContent = 'right'
divContent2[0].style.alignItems = 'center'
// textBoard2[0].style.textAlign = "right";
textBoard2[0].style.position = 'static'
break
// 上对齐
case 4:
divContent2[0].style.alignItems = 'flex-start'
textBoard2[0].style.position = 'static'
break
// 上下对齐
case 5:
divContent2[0].style.alignItems = 'center'
textBoard2[0].style.position = 'static'
break
// 下对齐
case 6:
divContent2[0].style.alignItems = 'flex-end'
textBoard2[0].style.position = 'static'
break
}
if (!alignmentNum) {
divContent2[0].style.alignItems = 'center'
textBoard2[0].style.position = 'static'
}
var textLeft = this.addZero(textBoard2[0].offsetLeft)
var textTop = this.addZero(textBoard2[0].offsetTop)
this.dataForm.COORDINATE = textLeft + textTop
// console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
},
addZero(num) {
return ('000' + num).slice(-3)
},
/*增加新的内容*/
/*删除内容*/
// delTemplateContent(data) {
// for (let i = 0; i < this.templateContent.length; i++) {
// if (
// this.templateContent.indexOf(data) ==
// this.templateContent.indexOf(this.templateContent[i])
// ) {
// if (this.templateContent.length == 1) {
// this.$modal.msgError("至少保留一条数据");
// } else {
// if (data.id) {
// this.templateDelContent.push(data);
// }
// 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.$modal.msgError(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
},
handleClose(done) {
var textBoard2 = document.getElementsByClassName('textBoard2')
textBoard2[0].style.position = 'absolute'
this.dialogVisible = false
}
}
}
</script>
<style lang="scss" scoped>
.infoBoardButton {
::v-deep .el-radio-button--medium .el-radio-button__inner {
height: 3vh;
line-height: 3vh;
padding: 0 0.6vw;
font-size: 0.7vw;
}
}
.previewContentCSS {
border: yellow 1px dashed;
}
/* 页脚 */
.dialog-footer {
padding-left: 450px;
}
.photoOther img,
.photo img {
max-width: 300px;
width: 100%;
// height: 80px;
}
.infoBoardButton {
display: flex;
justify-content: left;
}
.boardTextStyle {
line-height: 1;
caret-color: rgba(0, 0, 0, 0);
user-select: none;
position: absolute;
// max-height: 128px;
overflow: hidden;
}
.blackBoard2 {
background: #000000;
display: flex;
margin: 0 auto;
overflow: hidden;
position: relative;
// justify-content: center;
align-items: center;
}
::v-deep .el-card__body {
padding: 10px 0;
}
</style>

1
ruoyi-ui/src/views/boardView/boardData.json
View File

@ -0,0 +1 @@
"{\"support\":{\"PROTOCOL_TYPE\":\"GUANGDIAN_V33\",\"FONT_SIZE\":\"3232,2424,1616\",\"DEVICEID\":\"102111101\",\"COLOR\":\"红色,绿色,蓝色,黄色\",\"FONT\":\"宋体,黑体,楷体\"},\"content\":[{\"ITEM000\":[{\"SPEED\":\"1\",\"FONT_SIZE\":\"3232\",\"ACTION\":\"1\",\"COLOR\":\"黄色\",\"STATE\":true,\"CONTENT\":\"进入隧道 请开大灯1\",\"COORDINATE\":\"063004\",\"FONT\":\"黑体\",\"STAY\":\"500\"}]}]}"

874
ruoyi-ui/src/views/boardView/editInfo.vue
View File

@ -0,0 +1,874 @@
<template>
<div class="container infoBoardDialog">
<!-- 添加信息弹窗 -->
<el-dialog title="修改" :visible.sync="dialogVisible" width="42%" :before-close="closeDialog" :close-on-click-modal="false">
<div class="dialogStyleBox">
<div class="dialogLine"></div>
<div class="dialogCloseButton"></div>
</div>
<el-card class="box-card">
<div class="blackBoard1" v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
width: getDevicePixel(boardWidth, 0),
height: getDevicePixel(boardHeight, 1),
}">
<span class="textBoard1 boardTextStyle" :style="{
color: getColorStyle(dataForm.COLOR),
fontSize: getFontSize(dataForm.FONT_SIZE),
fontFamily: dataForm.FONT,
zIndex: '1000',
left: getCoordinate(dataForm.COORDINATE.substring(0, 3), 0),
top: getCoordinate(dataForm.COORDINATE.substring(3, 6), 1),
maxHeight:getDevicePixel(boardHeight, 1),
}" v-html="
dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace(
/ /g,
'&nbsp'
)
"></span>
</div>
</el-card>
<el-card>
<el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
<el-row :gutter="24" style="height: 45px">
<el-col :span="8" v-show="this.boardEmitItem.type == 2 || this.dataForm.category">
<el-form-item prop="category" label="所属类别">
<el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini" disabled>
<el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="16" class="infoBoardButton">
<el-radio-group v-model="radio1" @input="alignment(radio1)">
<el-radio-button :label="1">左对齐</el-radio-button>
<el-radio-button :label="2">左右居中</el-radio-button>
<el-radio-button :label="3">右对齐</el-radio-button>
</el-radio-group>
<!-- <el-button type="info" plain @click="alignment(6)" size="mini">下对齐</el-button>
<el-button type="info" plain @click="alignment(5)" size="mini">上下居中</el-button>
<el-button type="info" plain @click="alignment(4)" size="mini">上对齐</el-button> -->
<!-- <el-button type="primary" @click="alignment(1)" size="mini"
>左对齐</el-button
>
<el-button type="primary" @click="alignment(2)" size="mini"
>左右居中</el-button
>
<el-button type="primary" @click="alignment(3)" size="mini"
>右对齐</el-button
> -->
<!-- <el-button type="primary" plain @click="addCurrRow">添加</el-button> -->
</el-col>
</el-row>
<el-row :gutter="24" style="display: flex;
flex-wrap: wrap;width:100%">
<el-col :span="24">
<el-form-item label="详细内容" prop="CONTENT">
<el-input type="textarea" clearable id="textContent" placeholder="详细内容" v-model="dataForm.CONTENT" @keyup.native="keyDown($event)"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="COLOR" label="字体颜色">
<el-select v-model="dataForm.COLOR" 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="8">
<el-form-item prop="FONT_SIZE" label="字体大小">
<el-select v-model="dataForm.FONT_SIZE" style="width: 100%" @change="changeFontSize">
<el-option v-for="item in fontSizeOpt" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="FONT" label="字体类型">
<el-select v-model="dataForm.FONT" filterable placeholder="请选择">
<el-option v-for="item in fontTypeOptions" :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="SPEED" label="字体间距">
<el-input-number
:min="0"
controls-position="right"
v-model="dataForm.SPEED"
style="width: 100%"
/>
</el-form-item>
</el-col> -->
<!-- <el-col :span="24" v-show="templateContent.length > 1">
<el-divider></el-divider>
</el-col> -->
<!-- <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="8">
<el-form-item prop="STAY" label="停留时间(秒)">
<el-input-number :min="0" controls-position="right" v-model="dataForm.STAY" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="ACTION" label="入屏方式">
<el-select v-model="dataForm.ACTION" filterable placeholder="请选择">
<el-option v-for="item in inScreenModeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="screenSize" label="屏幕尺寸">
<el-input disabled v-model="dataForm.screenSize"></el-input>
<!-- <el-select
@change="resolvingPowerType"
v-model="dataForm.screenSize"
filterable
placeholder="请选择"
disabled
>
<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="6">
<el-form-item prop="remark" label="备注">
<el-input v-model="dataForm.remark" style="width: 100%" />
</el-form-item>
</el-col> -->
</el-row>
</el-form>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button @click="dataFormSubmitHandle()" v-loading="loading" class="submitButton">确认
</el-button>
<el-button @click="closeDialog()" class="closeButton">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
// getTemplateInfo,
// addTemplate,
// addTemplateContent,
// editTemplateContent,
// editTemplate,
// deleteTemplate,
// getTemplateContent,
editTemplate,
editTemplateContent,
getGalleryList,
uploadBoardEditInfo,
getFontSizeByDevicePixel
} from '@/api/board/template'
import { checkIotBoardContent } from '@/api/board/vocabulary'
import { HashMap } from '@/api/board/informationBoard'
// 对象深拷贝
export const deepClone = data => {
// 封装的判断数据类型的方法
var type = typeof data
var obj
if (type === 'array') {
obj = []
} else if (type === 'object') {
obj = {}
} else {
// 不再具有下一层次
return data
}
if (type === 'array') {
for (var i = 0, len = data.length; i < len; i++) {
obj.push(deepClone(data[i]))
}
} else if (type === 'object') {
for (var key in data) {
obj[key] = deepClone(data[key])
}
}
return obj
}
export default {
props: {
boardEmitItem: {
required: true,
type: Object
}
},
data() {
return {
radio1: '0',
alignmentNum: 2,
iotTemplateCategoryList: [],
content: '',
boardWidth: '',
boardHeight: '',
// boardEmitItem:this.boardEmitItem,
disabled: true,
checkList: [], //复选框一组
obj: '',
imgUrl: [],
imgUrlOther: [],
dialogVisible: true,
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: '400',
height: '40',
content: '',
fontColor: 'yellow',
fontSize: '24',
fontType: 'KaiTi',
fontSpacing: 0,
coordinate: '000000',
url: '',
previewContent: '', //预览内容
ispreviewContent: -1,
dataForm: {
CONTENT: '',
STAY: '',
FONT: '',
COORDINATE: ''
// id: "",
// screenSize: "400*40", //屏幕尺寸
// inScreenMode: "1", //入屏方式
// rollSpeed: "1000",
// stopTime: "500",
// applyType: "", //适用类型
// vmsType: "", //情报板类型
// remark: "", //备注
// imgSizeFrom: "", //尺寸大小
// imageUrl: "",
// height: "",
// width: "",
// coordinate: "", //起始点位置;前3位代表x点的位值，后3位代表y点的位置
},
templateContentModel: '',
templateContent: [],
templateDelContent: [],
fontTypeOptions: [],
screenSizeOptions: [
{
type: '400*40'
},
{
type: '128*64'
}
],
colorOptions: [],
isCurrencyOptions: [
{
code: '0',
content: '通用'
},
{
code: '1',
content: '仅为智能推荐模板'
}
],
inScreenModeOptions: [],
imgSize: [
{
type: '1024*128',
name: '全屏'
},
{
type: '',
name: '正常'
}
],
fontSizeOpt: [],
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 {
itemPropertyMap: null,
CONTENT: [
{
required: true,
message: '请输入详细内容',
trigger: 'blur'
}
],
fontColor: [
{
required: true,
message: '请填写字体颜色',
trigger: 'blur'
}
],
fontSize: [
{
required: true,
message: '请填写字体大小',
trigger: 'blur'
}
],
fontType: [
{
required: true,
message: '请选择字体类型',
trigger: 'blur'
}
],
fontSpacing: [
{
required: true,
message: '请选择字体间距',
trigger: 'blur'
}
],
rollSpeed: [
{
required: true,
message: '请填写滚动速度',
trigger: 'blur'
}
],
stopTime: [
{
required: true,
message: '请填写停留时间',
trigger: 'blur'
}
],
inScreenMode: [
{
required: true,
message: '请选择入屏方式',
trigger: 'blur'
}
]
}
},
divStyle: function () {
return {
width: this.width + 'px',
height: this.height + 'px'
}
}
},
watch: {
// boardEmitItem(newval){
// console.log(newval,"newval")
// this.boardEmitItem = newval
// }
// "dataForm.CONTENT": {
// deep: true,
// handler: function (newValue, oldValue) {
// this.dataForm.content1 = newValue;
// },
// },
},
created() {
console.log(this.boardEmitItem, 'this.boardEmitItem')
this.getDicts('iot_template_category').then(res => {
this.iotTemplateCategoryList = res.data
console.log(this.iotTemplateCategoryList, 'this.iotTemplateCategoryList')
})
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, '入屏方式')
})
if (this.boardEmitItem) {
this.boardWidth = this.boardEmitItem.screenSize.split('*')[0]
this.boardHeight = this.boardEmitItem.screenSize.split('*')[1]
this.init()
}
},
methods: {
init() {
this.title = '修改'
this.dialogVisible = true
this.itemPropertyMap = new HashMap()
this.alignmentNum = 2
this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem))
this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR)
console.log(this.dataForm, 'this.dataForm')
// this.dataForm.FONT = this.getFont(this.boardEmitItem.FONT)
this.dataForm.CONTENT = JSON.parse(JSON.stringify(this.boardEmitItem.CONTENT.replace('<br>', '\n').replace(/ /g, ' ').replace('<r><n>', '\n')))
this.dataForm.STAY = JSON.parse(JSON.stringify(Number(this.boardEmitItem.STAY) / 100))
this.getFontSizeList()
},
getColorValue(color) {
if (color == '#00FF00') {
return '绿色'
} else {
return color
}
},
getFontSizeList() {
this.getDicts('iot_device_font_size').then(res => {
this.fontSizeOpt = res.data
})
/* getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
console.log(res, "根据分辨率筛字体大小");
this.fontSizeOpt = res.data.fontSizeList;
});*/
},
changeFontSize() {
setTimeout(() => {
this.alignment(this.alignmentNum)
}, 100)
},
alignment(alignmentNum) {
var divContent1 = document.getElementsByClassName('blackBoard1')
var textBoard1 = document.getElementsByClassName('textBoard1')
switch (alignmentNum) {
// 左对齐
case 1:
textBoard1[0].style.position = 'static'
divContent1[0].style.justifyContent = 'left'
divContent1[0].style.alignItems = 'center'
break
// 左右居中
case 2:
textBoard1[0].style.position = 'static'
divContent1[0].style.justifyContent = 'center'
divContent1[0].style.alignItems = 'center'
break
// 右对齐
case 3:
divContent1[0].style.justifyContent = 'right'
divContent1[0].style.alignItems = 'center'
textBoard1[0].style.position = 'static'
break
// 上对齐
case 4:
divContent1[0].style.alignItems = 'flex-start'
textBoard1[0].style.position = 'static'
break
// 上下对齐
case 5:
divContent1[0].style.alignItems = 'center'
textBoard1[0].style.position = 'static'
break
// 下对齐
case 6:
divContent1[0].style.alignItems = 'flex-end'
textBoard1[0].style.position = 'static'
break
}
var textLeft = this.addZero(JSON.parse(JSON.stringify(textBoard1[0].offsetLeft)))
var textTop = this.addZero(textBoard1[0].offsetTop)
this.dataForm.COORDINATE = textLeft + textTop
},
addZero(num) {
if (num < 0) {
return '000'
} else {
return ('000' + num).slice(-3)
}
},
faceDrop(e) {
e.preventDefault() //阻止默认行为
this.listquery.push(this.curDragImgItem)
},
/* 拆分分辨率大小 */
// resolvingPowerType(data) {
// let a = [];
// a = data.split("*");
// this.width = a[0];
// this.height = a[1];
// },
// 全选
allowDrop(e) {
e.preventDefault() //阻止默认行为
},
ondragenter(e) {
e.preventDefault() //阻止默认行为
},
keyDown(ev) {
this.alignment(this.alignmentNum)
},
// 表单确认
dataFormSubmitHandle() {
console.log(this.dataForm.type, 'this.dataForm.type')
if (!this.dataForm.CONTENT.trim()) {
return this.$modal.msgError('当前输入内容为空')
}
this.loading = true
console.log(this.dataForm, '点击修改 表单')
this.loading = false
this.isAdd = false
if (this.dataForm.type == 1) {
this.dataForm.STAY = Number(this.dataForm.STAY) * 100
this.$emit('receiveForm', this.dataForm)
console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
} else {
const tcontent = {
content: this.dataForm.CONTENT,
text: this.dataForm.CONTENT,
coordinate: this.dataForm.COORDINATE,
createBy: null,
createTime: null,
fontColor: this.dataForm.COLOR,
fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
fontSpacing: this.dataForm.SPEED,
fontType: this.dataForm.FONT,
height: null,
id: this.dataForm.id,
imageUrl: null,
params: {},
remark: null,
searchValue: null,
templateId: this.dataForm.id,
updateBy: null,
updateTime: null,
width: null
}
const param = {
applyType: '',
category: this.dataForm.category,
createBy: null,
createTime: null,
dictLable: null,
id: this.dataForm.id,
inScreenMode: this.dataForm.ACTION,
isCurrency: null,
params: {},
remark: '',
screenSize: this.dataForm.screenSize,
searchValue: null,
stopTime: Number(this.dataForm.STAY) * 100,
tcontents: null,
templateType: null,
updateBy: null,
updateTime: null,
vmsType: '',
tcontent: tcontent,
templateId: this.dataForm.id
}
editTemplate(param).then(data => {})
let templateContent = []
templateContent.push({
content: this.dataForm.CONTENT,
fontColor: this.dataForm.COLOR,
fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
fontType: this.dataForm.FONT,
fontSpacing: this.dataForm.SPEED,
coordinate: this.dataForm.COORDINATE,
id: this.dataForm.tcontentsId,
templateId: this.dataForm.id
})
var params = {
templateContent: templateContent,
templateId: this.dataForm.id,
templateDelContent: []
}
console.log(params, 'params')
editTemplateContent(params).then(response => {
console.log(response, '返回结果')
this.$modal.msgSuccess('修改成功')
})
this.$forceUpdate()
}
this.closeDialog()
/*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
if (response.data == 0) {
return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
} else if (response.data == 2) {
return this.$modal.msgError('当前输入内容为空')
} else {
this.loading = true
console.log(this.dataForm, '点击修改 表单')
this.loading = false
this.isAdd = false
if (this.dataForm.type == 1) {
this.dataForm.STAY = Number(this.dataForm.STAY) * 100
this.$emit('receiveForm', this.dataForm)
console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容')
} else {
const tcontent = {
content: this.dataForm.CONTENT,
text: this.dataForm.CONTENT,
coordinate: this.dataForm.COORDINATE,
createBy: null,
createTime: null,
fontColor: this.dataForm.COLOR,
fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
fontSpacing: this.dataForm.SPEED,
fontType: this.dataForm.FONT,
height: null,
id: this.dataForm.id,
imageUrl: null,
params: {},
remark: null,
searchValue: null,
templateId: this.dataForm.id,
updateBy: null,
updateTime: null,
width: null
}
const param = {
applyType: '',
category: this.dataForm.category,
createBy: null,
createTime: null,
dictLable: null,
id: this.dataForm.id,
inScreenMode: this.dataForm.ACTION,
isCurrency: null,
params: {},
remark: '',
screenSize: this.dataForm.screenSize,
searchValue: null,
stopTime: Number(this.dataForm.STAY) * 100,
tcontents: null,
templateType: null,
updateBy: null,
updateTime: null,
vmsType: '',
tcontent: tcontent,
templateId: this.dataForm.id
}
editTemplate(param).then(data => {})
let templateContent = []
templateContent.push({
content: this.dataForm.CONTENT,
fontColor: this.dataForm.COLOR,
fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
fontType: this.dataForm.FONT,
fontSpacing: this.dataForm.SPEED,
coordinate: this.dataForm.COORDINATE,
id: this.dataForm.tcontentsId,
templateId: this.dataForm.id
})
var params = {
templateContent: templateContent,
templateId: this.dataForm.id,
templateDelContent: []
}
console.log(params, 'params')
editTemplateContent(params).then(response => {
console.log(response, '返回结果')
this.$modal.msgSuccess('修改成功')
})
this.$forceUpdate()
}
this.closeDialog()
}
})*/
},
getFontStyle(font) {
if (font == '宋体') {
return 'Simsun'
} else if (font == '黑体') {
return 'SimHei'
} else if (font == '楷体') {
return 'KaiTi'
} else if (font == '仿宋') {
return 'FangSong'
} else if (font == '隶书') {
return 'LiSu'
}
},
getColorStyle(font) {
if (font == '黄色') {
return 'yellow'
} else if (font == '红色') {
return 'red'
} else if (font == '绿色' || font == 'GreenYellow') {
return '#00FF00'
} else if (font == '蓝色') {
return 'blue'
} else {
return font
}
},
closeDialog() {
this.dialogVisible = false
this.$emit('dialogClose')
},
getDevicePixel(devicePixel, num) {
if (num == 0) {
if (devicePixel > 768) {
return 768 + 'px'
} else {
return devicePixel + 'px'
}
} else if (num == 1) {
if (devicePixel > 128) {
return 128 + 'px'
} else {
return devicePixel + 'px'
}
}
},
getCoordinate(coordinate, num) {
if (num == 0) {
if (this.boardWidth > 768) {
let i = this.boardWidth / 768
console.log(coordinate / i, 'width')
return coordinate / i + 'px'
} else {
return coordinate + 'px'
}
} else if (num == 1) {
if (this.boardHeight > 128) {
let i = this.boardHeight / 128
console.log(coordinate / i, 'height')
return coordinate / i + 'px'
} else {
return coordinate + 'px'
}
}
},
getFontSize(size) {
if (this.boardWidth > 768) {
let i = this.boardWidth / 768
return size.substring(0, 2) / i - 2 + 'px'
} else {
return size
}
}
}
}
</script>
<style lang="scss" scoped>
.previewContentCSS {
border: yellow 1px dashed;
}
/* 页脚 */
.dialog-footer {
padding-left: 450px;
}
.photoOther img,
.photo img {
max-width: 300px;
width: 100%;
// height: 80px;
}
.infoBoardButton {
::v-deep .el-radio-button--medium .el-radio-button__inner {
height: 3vh;
line-height: 3vh;
padding: 0 0.6vw;
font-size: 0.7vw;
}
}
::v-deep .el-card__body {
padding: 10px 0;
}
.boardTextStyle {
line-height: 1;
caret-color: rgba(0, 0, 0, 0);
user-select: none;
position: absolute;
// max-height: 128px;
overflow: hidden;
}
.blackBoard1 {
background: #000000;
display: flex;
margin: 0 auto;
overflow: hidden;
position: relative;
// text-align: center;
align-items: center;
}
</style>

470
ruoyi-ui/src/views/index.vue
View File

@ -8,6 +8,83 @@
<div ref="mapDialog" class="map_dialog" :style="{'top':mapDialogTop,'left':mapDialogLeft}">
</div>
<!-- 情报板弹框 -->
<transition name="el-zoom-in-center">
<div v-if="dialogInfoLeft" class="dialog_info">
<div class="dialog_info_left">
<div class="dialog_info_left_t">
<div class="dialog_info_left_t_txt">{{ dialogTit }}</div>
<img class="dialog_info_left_t_img" src="@/assets/screen/xtb/close.png" alt="" @click="closeDialogBtnFn">
<img class="dialog_info_left_t_ti" src="@/assets/screen/xtb/cltiao.png" alt="">
</div>
<div class="dialog_info_left_show">
<div v-if="dialogInfoList.length > 0" class="dialog_info_left_show_box" style="height: 100%;">
<div class="dialog_info_left_show_box_item" v-for="item in dialogInfoList" :key="item.id">
<div class="dialog_info_left_show_l">
<div class="dialog_info_left_show_l_xsq" :style="{'width':item.w / getScrollSz(item.w)+'px','height':item.h / getScrollSz(item.w)+'px',}">
<div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':item.fz / getScrollSz(item.w)+'px',color:item.col}" v-html="item.txt"></div>
</div>
</div>
<div class="dialog_info_left_show_r">
<div @click="editOutline(item)" class="show_r_btn dialog_info_left_show_r_btn1"></div>
<div @click="delMoFn(item)" class="show_r_btn dialog_info_left_show_r_btn2"></div>
</div>
</div>
</div>
<div v-else class="dialog_info_left_show_box" style="height: 100%;">
<div class="dialog_info_left_show_box_empty">暂无数据</div>
</div>
<div class="dialog_info_left_show_bottom">
<el-tabs v-model="activeName" @tab-click="tabClickFn">
<el-tab-pane label="详情信息" name="first">
<div class="show_bottom_tab_box">
<div class="show_bottom_tab_item" v-for="item in tabInfoList" :key="item.id">
<div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
<div class="show_bottom_tab_item_r" :style="{'color':item.col}"> {{ item.txt }}</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
</el-tabs>
</div>
<div class="dialog_info_left_show_bottom_btn">
<div class="show_bottom_btn_add" @click="addMoDataInfoFn(2,2)">添加信息</div>
<div class="show_bottom_btn_del">信息发布</div>
</div>
<div class="dialog_info_left_show_ce" @click="showCeInfoFn">
<img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt="" :style="{'transform':dialogInfoRight ? 'rotate(0deg)': 'rotate(180deg)'}">
<div class="show_ce_txt">信息模板</div>
</div>
</div>
</div>
<transition name="el-zoom-in-center">
<div v-if="dialogInfoRight" class="dialog_info_right">
<div v-for="item in moBanDataList" :key="item.id">
<div class="dialog_info_right_tit">{{ item.bt }}</div>
<div class="dialog_info_right_show">
<div class="dialog_info_left_show_box">
<div class="dialog_info_left_show_box_item" v-for="i in item.mbList" :key="i.id">
<div class="dialog_info_left_show_l" style="width:17vw;">
<div class="dialog_info_left_show_l_xsq" :style="{'width':i.w / getScrollSz(i.w)+'px','height':i.h / getScrollSz(i.w)+'px',}">
<div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.fz / getScrollSz(i.w)+'px',color:i.col}" v-html="i.txt"></div>
</div>
</div>
<div class="dialog_info_left_show_r" style="width: 3.5vw;">
<div @click="putLeftFn(i)" class="show_r_btn dialog_info_left_show_r_btn3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</transition>
<!-- 情报板弹框中的弹框 -->
<addBoard ref="addinfo" @addInfo="addInfo" />
<editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
<!-- 左边 -->
<div class="home_page_left">
<div class="home_page_left_t">
@ -92,10 +169,18 @@
<script>
import GaoDeMap from '@/views/map/index.vue'
import carECharts from '@/views/echarts/carECharts.vue'
import addBoard from '@/views/boardView/addinfo.vue'
import editBoard from '@/views/boardView/editInfo.vue'
export default {
name: 'indexView',
data() {
return {
showEmit: false,
boardEmitItem: {}, //修改弹窗的数据
activeName: 'first',
dialogTit: '门架式可变信息标志YK16+270',
dialogInfoLeft: true,
dialogInfoRight: true,
mapDialogTop: '0px',
mapDialogLeft: '0px',
keyMonitoringList: [
@ -126,13 +211,37 @@ export default {
{ id: 37, name: '语音广播', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/yygb.png'), require('@/assets/screen/xtb/lcsb/yyg.png')] },
{ id: 38, name: '情报板', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/qbb.png'), require('@/assets/screen/xtb/lcsb/qb.png')] },
{ id: 39, name: '合流区', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/hlq.png'), require('@/assets/screen/xtb/lcsb/hl.png')] }
],
dialogInfoList: [],
moBanDataList: [
{
id: 1001,
bt: '日常通用',
mbList: [
{ id: 305, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' },
{ id: 306, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' },
{ id: 307, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FF0000', fz: 60, align: 'center' },
{ id: 308, txt: '谨慎驾驶, <br/> 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' }
]
},
{ id: 1002, bt: '日常通用', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
{ id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }
],
tabInfoList: [
{ id: 401, tit: '设备名称', txt: '门架式可变信息标志', col: '#fff' },
{ id: 402, tit: '道路名称', txt: 'G35济菏高速', col: '#fff' },
{ id: 403, tit: '所属机构', txt: '山东高速济南发展公司', col: '#fff' },
{ id: 404, tit: '设备桩号', txt: 'K094+079', col: '#fff' },
{ id: 405, tit: '设备厂商', txt: '光电比特', col: '#fff' },
{ id: 406, tit: '设备状态', txt: '离线', col: '#888' }
]
}
},
props: [],
// 注册组件
components: { GaoDeMap, carECharts },
components: { GaoDeMap, carECharts, addBoard, editBoard },
// 计算属性
computed: {},
// 生命周期函数
@ -156,19 +265,118 @@ export default {
// 地图点位
mapClickEvent(e) {
console.log('父组件地图点位', e)
console.log()
this.dialogInfoLeft = true
// this.mapDialogTop = e.pixel.y + 'px'
// this.mapDialogLeft = e.pixel.x + 'px'
this.$refs.mapDialog.style.top = e.pixel.y + 'px'
this.$refs.mapDialog.style.left = e.pixel.x + 'px'
console.log(this.$refs.mapDialog)
// this.$refs.mapDialog.style.top = e.pixel.y + 'px'
// this.$refs.mapDialog.style.left = e.pixel.x + 'px'
// console.log(this.$refs.mapDialog)
},
// 接收子组件新增待发模板
addInfo(form) {
console.log(form, '待发新增')
// form.ID = this.contentList.length
// this.contentList.push(deepClone(form))
// this.$message.success('添加成功')
// this.$forceUpdate()
},
// 打开添加信息弹窗
addMoDataInfoFn(type, mode) {
this.$refs.addinfo.init('', type, mode)
},
// 修改弹窗
editOutline(item, index, type) {
// this.index = index
// this.editType = type
// console.log(item, '修改弹窗')
// this.boardEmitItem = {
// FONT_SIZE: item.tcontents[0].fontSize + 'px',
// COLOR: item.tcontents[0].fontColor,
// CONTENT: item.tcontents[0].content,
// COORDINATE: item.tcontents[0].coordinate,
// FONT: this.getFont(item.tcontents[0].fontType),
// SPEED: item.tcontents[0].fontSpacing,
// ACTION: item.inScreenMode, //出屏方式
// STAY: item.stopTime, //停留时间
// type: type,
// screenSize: item.screenSize,
// category: item.category,
// id: item.id,
// tcontentsId: item.tcontents[0].id
// }
this.showEmit = true
},
// 待下发 编辑
openQbbDrawer(item, index, type) {
// this.index_ = index
// console.log(item)
// this.boardEmitItem = item
// this.boardEmitItem.screenSize = this.form.devicePixel
// this.boardEmitItem.deviceId = this.deviceId
// this.boardEmitItem.type = type
this.showEmit = true
},
// 接收子组件form表单 修改
receiveForm(form) {
console.log(form, '接收子组件form表单 修改')
// this.contentList.splice(this.index_, 1, form)
// this.$forceUpdate()
// this.allVmsTemplate('no')
},
dialogClose() {
this.showEmit = false
this.arrowRightVisible = false
// setTimeout(() => {
// this.allVmsTemplate('no')
// }, 500)
},
delMoFn(item) {
this.$confirm('确认要删除吗？')
.then(_ => {
this.removeItemById(this.dialogInfoList, item.id)
this.$message({
message: '删除成功!',
type: 'success'
})
})
.catch(_ => {})
},
putLeftFn(item) {
console.log('点击事件', item)
this.dialogInfoList.push(item)
},
tabClickFn(tab, event) {
console.log(tab, event)
},
closeDialogBtnFn() {
this.dialogInfoLeft = false
this.dialogInfoRight = false
},
showCeInfoFn() {
this.dialogInfoRight = !this.dialogInfoRight
},
subjectBtnFn(item) {
this.subjectBtn = item.id
},
removeItemById(arr, id) {
const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
if (index !== -1) {
arr.splice(index, 1) // 从数组中删除该项
}
},
getScrollSz(w) {
if (w > 765) {
return 3
} else if (w > 479) {
return 2
} else if (w > 191) {
return 1
}
}
}
}
</script>xy
</script>
<style lang='scss' scoped>
.home_page {
width: 100%;
@ -507,12 +715,258 @@ export default {
display: flex;
}
.map_dialog {
width: 10vw;
height: 20vh;
width: 510px;
height: 550px;
background-color: pink;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-110%, -110%);
}
.dialog_info {
width: 49.48vw;
height: 56vh;
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.dialog_info_left {
width: 26.56vw;
height: 100%;
background-color: #114c66;
}
.dialog_info_right {
width: 22.4vw;
height: 51.44vh;
border: 2px solid #196980;
background-color: #114c66;
padding: 1vh 0.5vw;
overflow-y: scroll;
}
.dialog_info_left_t {
width: 100%;
height: 4.44vh;
padding: 0 1vw;
background-image: url('~@/assets/screen/xtb/qbbtit.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.dialog_info_left_t_txt {
color: #3de8ff;
font-size: 18px;
}
.dialog_info_left_t_img {
width: 13px;
height: 13px;
cursor: pointer;
}
.dialog_info_left_t_ti {
width: 55%;
height: 0.5vh;
position: absolute;
left: 0;
top: 0;
}
.dialog_info_left_show {
width: 100%;
height: 30vh;
padding: 1vh 2vw 1vh 0.5vw;
position: relative;
}
.dialog_info_left_show_box {
width: 100%;
// height: 100%;
overflow-y: scroll;
}
.dialog_info_left_show_l {
width: 18.5vw;
// height: 4.91vh;
border: 2px solid #1d7890;
padding: 0.2vh 0;
display: flex;
justify-content: center;
}
.dialog_info_left_show_r {
width: 5vw;
// height: 4.91vh;
border: 2px solid #1d7890;
display: flex;
justify-content: space-around;
align-items: center;
}
.dialog_info_left_show_l_xsq {
width: 13.33vw;
height: 100%;
font-size: 18px;
color: #ff0000;
text-align: center;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
.show_r_btn {
width: 1.67vw;
height: 2.96vh;
cursor: pointer;
}
.dialog_info_left_show_r_btn1 {
background-image: url('~@/assets/screen/xtb/gg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.dialog_info_left_show_r_btn2 {
background-image: url('~@/assets/screen/xtb/xx.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.dialog_info_left_show_r_btn3 {
background-image: url('~@/assets/screen/xtb/zz.png');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.dialog_info_left_show_box_item {
margin-bottom: 0.5vh;
display: flex;
justify-content: space-between;
}
.dialog_info_left_show_bottom {
width: 105%;
height: 16.52vh;
}
.show_bottom_tab_item {
width: 50%;
padding: 0.5vh 0;
display: flex;
// flex-wrap: wrap;
// align-items: center;
}
.show_bottom_tab_box {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.show_bottom_tab_item_l {
color: #3de8ff;
font-size: 14px;
}
.show_bottom_tab_item_r {
color: #fff;
font-size: 14px;
margin-left: 0.5vw;
}
.dialog_info_left_show_ce {
position: absolute;
right: 0%;
top: 0%;
width: 24px;
height: 95px;
padding: 0.5vh 0;
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
text-align: center;
cursor: pointer;
}
.show_ce_img {
width: 15px;
height: 10px;
transition: transform 0.3s ease; /* 过渡效果 */
}
.show_ce_txt {
color: #fff;
font-size: 13px;
}
.dialog_info_left_show_box_empty {
font-size: 14px;
text-align: center;
color: #fff;
}
.dialog_info_right_tit {
color: #fff;
font-size: 14px;
margin-bottom: 0.5vh;
}
.dialog_info_right_show {
width: 100%;
// height: 28vh;
}
.dialog_info_left_show_bottom_btn {
width: 100%;
height: 5vh;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: center;
}
.show_bottom_btn_add {
width: 90px;
height: 23px;
color: #fff;
font-size: 14px;
line-height: 23px;
background: #00b3cc;
border-radius: 48px 48px 48px 48px;
opacity: 1;
margin-right: 0.5vw;
cursor: pointer;
}
.show_bottom_btn_del {
width: 90px;
height: 23px;
color: #fff;
font-size: 14px;
line-height: 23px;
background: #c87800;
border-radius: 48px 48px 48px 48px;
opacity: 1;
cursor: pointer;
}
// background-color: #104b65;
// background-image: url('~@/assets/screen/xtb/qbbtit.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
// background-position: center;
/* 通用滚动条样式 */
::-webkit-scrollbar {
width: 3px; /* 设置滚动条宽度 */
height: 3px; /* 设置滚动条高度 */
}
::-webkit-scrollbar-track {
background-color: #114c66; /* 设置滚动条轨道颜色 */
}
::-webkit-scrollbar-thumb {
background-color: #9abce0; /* 设置滚动条滑块颜色 */
border-radius: 4px; /* 设置滚动条滑块圆角 */
}
::v-deep .el-tabs__nav-wrap::after {
background-color: #316076;
}
::v-deep .el-tabs__item.is-active {
color: #3de8ff !important;
}
::v-deep .el-tabs__item {
color: #fff !important;
}
::v-deep .el-tabs__active-bar {
background-color: #3de8ff !important;
}
</style>
Write Preview
Loading…
Cancel
Save