From 161bd741bb318554887991d20febbdac05a56e73 Mon Sep 17 00:00:00 2001
From: IAMHERE <446961233@qq.com>
Date: Thu, 28 Dec 2023 20:05:31 +0800
Subject: [PATCH] =?UTF-8?q?fix-=E6=9B=B4=E6=96=B0=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/src/views/boardView/addinfo.vue | 203 ++++++++--------
ruoyi-ui/src/views/boardView/editInfo.vue | 241 ++++++++-----------
ruoyi-ui/src/views/index.vue | 270 ++++++++++++++++++++--
ruoyi-ui/src/views/map/index.vue | 18 +-
4 files changed, 475 insertions(+), 257 deletions(-)
diff --git a/ruoyi-ui/src/views/boardView/addinfo.vue b/ruoyi-ui/src/views/boardView/addinfo.vue
index 3eacc219..6d96b273 100644
--- a/ruoyi-ui/src/views/boardView/addinfo.vue
+++ b/ruoyi-ui/src/views/boardView/addinfo.vue
@@ -10,6 +10,9 @@
<div v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{
width: boardWidth + 'px',
height: boardHeight + 'px',
+ position: 'relative',
+ lineHeight:boardHeight + 'px',
+ justifyContent: getTextAlign(dataForm.formatStyle)
}" class="blackBoard2">
<span :style="{
color: getColorStyle(dataForm.COLOR),
@@ -51,10 +54,10 @@
</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-group v-model="formatStyle" @input="alignment(formatStyle)">
+ <el-radio-button :label="0">左对齐</el-radio-button>
<el-radio-button :label="2">左右居中</el-radio-button>
- <el-radio-button :label="3">右对齐</el-radio-button>
+ <el-radio-button :label="1">右对齐</el-radio-button>
</el-radio-group>
</el-col>
</el-row>
@@ -86,7 +89,7 @@
<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 v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
@@ -94,7 +97,7 @@
<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 v-for="item in fontSizeOpt" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
</el-option>
</el-select>
</el-form-item>
@@ -102,7 +105,7 @@
<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 v-for="item in fontTypeOptions" :key="item.cssClass" :label="item.dictLabel" :value="item.cssClass">
</el-option>
</el-select>
</el-form-item>
@@ -268,7 +271,8 @@ export default {
iotTemplateCategoryList: [],
infoType: '',
devicePixelBoolean: false,
- categoryRules: false
+ categoryRules: false,
+ formatStyle: '2'
}
},
// directives: {
@@ -402,14 +406,15 @@ export default {
this.height = '40'
this.dataForm = {
CONTENT: '请输入内容',
- COLOR: 'yellow',
+ COLOR: 'FF0000',
FONT: '黑体',
SPEED: '1',
ACTION: '1',
// COORDINATE: "",
STATE: 'true',
STAY: '5',
- screenSize: devicePixel
+ screenSize: devicePixel,
+ formatStyle: '2'
}
this.content = '请输入内容'
} else {
@@ -529,6 +534,7 @@ export default {
return this.$modal.msgError('情报板所属类别不能为空')
}
this.$emit('addInfo', this.dataForm)
+ this.dialogVisible = false
//走接口检验内容是否包含敏感字段
/*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
if (response.data == 0) {
@@ -613,80 +619,81 @@ export default {
}
})*/
- 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),
+ // formatStyle: this.dataForm.formatStyle
+ // })
+ // // 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) {
@@ -703,16 +710,16 @@ export default {
}
},
getColorStyle(font) {
- if (font == '黄色') {
- return 'yellow'
- } else if (font == '红色') {
- return 'red'
+ if (font == '黄色' || font == 'yellow') {
+ return '#FFFF00'
+ } else if (font == '红色' || font == 'red') {
+ return '#FF0000'
} else if (font == '绿色' || font == 'GreenYellow') {
return '#00FF00'
- } else if (font == '蓝色') {
- return 'blue'
+ } else if (font == '蓝色' || font == 'blue') {
+ return '#0000FF'
} else {
- return font
+ return '#' + font
}
},
// 文字对齐方式
@@ -730,7 +737,7 @@ export default {
switch (alignmentNum) {
// 左对齐
- case 1:
+ case 0:
divContent2[0].style.justifyContent = 'left'
divContent2[0].style.alignItems = 'center'
// textBoard2[0].style.textAlign = "left";
@@ -746,7 +753,7 @@ export default {
break
// 右对齐
- case 3:
+ case 1:
divContent2[0].style.justifyContent = 'right'
divContent2[0].style.alignItems = 'center'
// textBoard2[0].style.textAlign = "right";
@@ -780,12 +787,24 @@ export default {
var textTop = this.addZero(textBoard2[0].offsetTop)
this.dataForm.COORDINATE = textLeft + textTop
// console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE");
+ if (alignmentNum != undefined) {
+ this.dataForm.formatStyle = alignmentNum
+ }
},
addZero(num) {
return ('000' + num).slice(-3)
},
/*增加新的内容*/
+ getTextAlign(font) {
+ if (font == '0') {
+ return 'left'
+ } else if (font == '1') {
+ return 'right'
+ } else {
+ return 'center'
+ }
+ },
/*删除内容*/
// delTemplateContent(data) {
// for (let i = 0; i < this.templateContent.length; i++) {
diff --git a/ruoyi-ui/src/views/boardView/editInfo.vue b/ruoyi-ui/src/views/boardView/editInfo.vue
index 5a1f7f7e..e5481cb2 100644
--- a/ruoyi-ui/src/views/boardView/editInfo.vue
+++ b/ruoyi-ui/src/views/boardView/editInfo.vue
@@ -12,15 +12,15 @@
height: getDevicePixel(boardHeight, 1),
position: 'relative',
lineHeight:boardHeight + 'px',
- textAlign: getTextAlign(dataForm.formatStyle)
+ textAlign: getTextAlign(dataForm.formatStyle),
+ justifyContent: getTextAlign(dataForm.formatStyle)
}">
<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(
@@ -43,10 +43,10 @@
</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-group v-model="formatStyle" @input="alignment(formatStyle)">
+ <el-radio-button :label="0">左对齐</el-radio-button>
<el-radio-button :label="2">左右居中</el-radio-button>
- <el-radio-button :label="3">右对齐</el-radio-button>
+ <el-radio-button :label="1">右对齐</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>
@@ -74,21 +74,7 @@
<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="8">
@@ -103,7 +89,7 @@
<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 v-for="item in colorOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
@@ -124,41 +110,13 @@
</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="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>
@@ -222,7 +180,7 @@ export default {
data() {
return {
- radio1: '0',
+ formatStyle: 2,
alignmentNum: 2,
iotTemplateCategoryList: [],
content: '',
@@ -480,6 +438,7 @@ export default {
this.itemPropertyMap = new HashMap()
this.alignmentNum = 2
this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem))
+ this.dataForm.formatStyle = this.formatStyle
this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR)
console.log(this.dataForm, 'this.dataForm')
// this.dataForm.FONT = this.getFont(this.boardEmitItem.FONT)
@@ -515,7 +474,7 @@ export default {
switch (alignmentNum) {
// 左对齐
- case 1:
+ case 0:
textBoard1[0].style.position = 'static'
divContent1[0].style.justifyContent = 'left'
divContent1[0].style.alignItems = 'center'
@@ -527,25 +486,25 @@ export default {
divContent1[0].style.alignItems = 'center'
break
// 右对齐
- case 3:
+ case 1:
divContent1[0].style.justifyContent = 'right'
divContent1[0].style.alignItems = 'center'
textBoard1[0].style.position = 'static'
break
// 上对齐
- case 4:
+ case 3:
divContent1[0].style.alignItems = 'flex-start'
textBoard1[0].style.position = 'static'
break
// 上下对齐
- case 5:
+ case 4:
divContent1[0].style.alignItems = 'center'
textBoard1[0].style.position = 'static'
break
// 下对齐
- case 6:
+ case 5:
divContent1[0].style.alignItems = 'flex-end'
textBoard1[0].style.position = 'static'
@@ -554,7 +513,7 @@ export default {
var textLeft = this.addZero(JSON.parse(JSON.stringify(textBoard1[0].offsetLeft)))
var textTop = this.addZero(textBoard1[0].offsetTop)
-
+ console.log('宽高比11111111', textLeft, textTop)
this.dataForm.COORDINATE = textLeft + textTop
this.dataForm.formatStyle = alignmentNum
},
@@ -601,86 +560,86 @@ export default {
if (!this.dataForm.CONTENT.trim()) {
return this.$modal.msgError('当前输入内容为空')
}
- this.loading = true
+ // this.loading = true
// console.log('点击修改 表单', this.dataForm)
this.$emit('receiveForm', 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,
- formatStyle: this.dataForm.formatStyle
- })
+ // 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.replace(/\D/g, ''),
+ // 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.replace(/\D/g, ''),
+ // fontType: this.dataForm.FONT,
+ // fontSpacing: this.dataForm.SPEED,
+ // coordinate: this.dataForm.COORDINATE,
+ // id: this.dataForm.tcontentsId,
+ // templateId: this.dataForm.id,
+ // formatStyle: this.dataForm.formatStyle
+ // })
- 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()
- }
+ // 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 => {
@@ -785,16 +744,16 @@ export default {
}
},
getColorStyle(font) {
- if (font == '黄色') {
- return 'yellow'
- } else if (font == '红色') {
- return 'red'
+ if (font == '黄色' || font == 'yellow') {
+ return '#FFFF00'
+ } else if (font == '红色' || font == 'red') {
+ return '#FF0000'
} else if (font == '绿色' || font == 'GreenYellow') {
return '#00FF00'
- } else if (font == '蓝色') {
- return 'blue'
+ } else if (font == '蓝色' || font == 'blue') {
+ return '#0000FF'
} else {
- return font
+ return '#' + font
}
},
closeDialog() {
@@ -838,7 +797,7 @@ export default {
getFontSize(size) {
if (this.boardWidth > 768) {
let i = this.boardWidth / 768
- return size.substring(0, 2) / i - 2 + 'px'
+ return size.replace(/\D/g, '') / i - 2 + 'px'
} else {
return size
}
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index 4e57b64a..a20a0098 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -21,8 +21,8 @@
<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="i in dialogInfoList" :key="i.id">
<div class="dialog_info_left_show_l">
- <div class="dialog_info_left_show_l_xsq" :style="{'width':processString(i.screenSize,'w') / getScrollSz(processString(i.screenSize,'w'))+'px','height':processString(i.screenSize,'h') / getScrollSz(processString(i.screenSize,'w'))+'px','padding-left':processStrNum(i.tcontents[0].coordinate,'l') / getScrollSz(processString(i.screenSize,'w'))+'px','padding-top':processStrNum(i.tcontents[0].coordinate,'t') / getScrollSz(processString(i.screenSize,'w'))+'px'}">
- <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize,'w'))+'px','color':i.tcontents[0].fontColor,'font-family':i.tcontents[0].fontType}" v-html="i.tcontents[0].content"></div>
+ <div class="dialog_info_left_show_l_xsq" :style="{'width':processString(i.screenSize,'w') / getScrollSz(processString(i.screenSize,'w'))+'px','height':processString(i.screenSize,'h') / getScrollSz(processString(i.screenSize,'w'))+'px','justify-content':getTextAlign(i.tcontents[0].formatStyle)}">
+ <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize,'w'))+'px','color':'#'+i.tcontents[0].fontColor,'font-family':i.tcontents[0].fontType,}" v-html="i.tcontents[0].content"></div>
</div>
</div>
<div class="dialog_info_left_show_r">
@@ -65,8 +65,8 @@
<div class="dialog_info_left_show_box" style="overflow-y: visible;">
<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:16vw;">
- <div class="dialog_info_left_show_l_xsq" :style="{'width':processString(i.screenSize,'w') / getScrollSz(processString(i.screenSize,'w'))+'px','height':processString(i.screenSize,'h') / getScrollSz(processString(i.screenSize,'w'))+'px','padding-left':processStrNum(i.tcontents[0].coordinate,'l') / getScrollSz(processString(i.screenSize,'w'))+'px','padding-top':processStrNum(i.tcontents[0].coordinate,'t') / getScrollSz(processString(i.screenSize,'w'))+'px'}">
- <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize,'w'))+'px','color':i.tcontents[0].fontColor,'font-family':i.tcontents[0].fontType}" v-html="i.tcontents[0].content"></div>
+ <div class="dialog_info_left_show_l_xsq" :style="{'width':processString(i.screenSize,'w') / getScrollSz(processString(i.screenSize,'w'))+'px','height':processString(i.screenSize,'h') / getScrollSz(processString(i.screenSize,'w'))+'px','justify-content':getTextAlign(i.tcontents[0].formatStyle)}">
+ <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.tcontents[0].fontSize / getScrollSz(processString(i.screenSize,'w'))+'px','color':'#'+i.tcontents[0].fontColor,'font-family':i.tcontents[0].fontType}" v-html="i.tcontents[0].content"></div>
</div>
</div>
<div class="dialog_info_left_show_r" style="width: 3.5vw;">
@@ -171,21 +171,23 @@ 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'
-import { invokedFunction } from '@/api/device/device.js'
+import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
import { getAllVmsTemplate, deleteTemplate } from '@/api//board/template.js'
import { getDicts } from '@/api/system/dict/data.js'
export default {
name: 'indexView',
data() {
return {
+ formData: [],
+ mapIds: '',
screenDataSize: '',
activeNames: [],
showEmit: false,
boardEmitItem: {}, //修改弹窗的数据
activeName: 'first',
dialogTit: '门架式可变信息标志YK16+270',
- dialogInfoLeft: true,
- dialogInfoRight: true,
+ dialogInfoLeft: false,
+ dialogInfoRight: false,
mapDialogTop: '0px',
mapDialogLeft: '0px',
keyMonitoringList: [
@@ -277,10 +279,14 @@ export default {
methods: {
// 地图点位
mapClickEvent(e) {
+ this.dialogInfoList = []
console.log('父组件地图点位', e)
this.dialogInfoLeft = true
+ this.mapIds = e.target._opts.extData.ids
this.screenDataSize = e.target._opts.extData.screenSize
+ this.dialogTit = e.target._opts.extData.tit
this.getTemplateHeaderFn()
+ this.onSubmit(this.mapIds)
// this.mapDialogTop = e.pixel.y + 'px'
// this.mapDialogLeft = e.pixel.x + 'px'
// this.$refs.mapDialog.style.top = e.pixel.y + 'px'
@@ -289,9 +295,203 @@ export default {
},
// 信息发布
InformationReleaseFn() {
- invokedFunction('65', '').then(res => {
- console.log(res)
+ // invokedFunction('65', '').then(res => {
+ // console.log(res)
+ // })
+
+ this.$confirm('是否确定发布情报板?', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
})
+ .then(() => {
+ let loading = this.$loading({
+ lock: true,
+ text: 'Loading',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ })
+ const objAll = {}
+ // objAll.deviceIds = this.checkedCities.toString()
+ objAll.deviceIds = this.mapIds
+ let that = this
+
+ // let devicePixel = this.form.devicePixel.split('*')
+ console.log('接口参数', this.dialogInfoList)
+ let newArr = this.dialogInfoList.map(item => {
+ let obj = {}
+
+ obj.STAY = item.stopTime
+ obj.ACTION = item.inScreenMode
+ obj.SPEED = item.tcontents[0].fontSpacing
+ obj.COORDINATE = item.screenSize.replace('*', '')
+ obj.COLOR = item.tcontents[0].fontColor
+ obj.FONT = this.getFontValue(item.tcontents[0].fontType)
+ obj.FONT_SIZE = item.tcontents[0].fontSize
+
+ obj.CONTENT = item.tcontents[0].content.replaceAll(',', '\\,')
+ obj.CONTENT = item.tcontents[0].content.replaceAll('=', '\\=')
+ obj.CONTENT = item.tcontents[0].content.replace(/\n/g, '\\\\n')
+
+ // obj.CONTENT = item.tcontents[0].content.replace(/\n|\r\n/g, '<r><n>')
+ obj.width = this.processString(item.screenSize, 'w')
+ obj.height = this.processString(item.screenSize, 'h')
+ obj.formatStyle = item.tcontents[0].formatStyle
+ return obj
+ })
+
+ objAll.parameters = newArr
+ const param = {
+ objectData: JSON.stringify(objAll)
+ }
+ console.log('newArr11111', newArr)
+
+ /* invokedFunction(65,'1B',{fileId:'1'}).then(res =>{
+ debugger
+ console.log('发布消息,播放文件-----------------------------')
+ console.log(res)
+ }).catch(()=>{
+ this.$modal.msgError("发布失败,请重试");
+ })*/
+
+ invokedFunction(595, 11, { size: '65535', fileName: 'play099.lst' })
+ .then(res => {
+ debugger
+ console.log('发布消息,校验文件名-------------------------------------')
+ console.log(res)
+ if (res.data.result == '01') {
+ invokedFunction(595, 13, { parameters: newArr })
+ .then(res => {
+ debugger
+ console.log('发布消息,发送文件内容-----------------------------')
+ console.log(res)
+ if (res.data.result == '01') {
+ invokedFunction(595, '1B', { fileId: '99' })
+ .then(res => {
+ debugger
+ console.log('发布消息,播放文件-----------------------------')
+ console.log(res)
+ })
+ .catch(() => {
+ this.$modal.msgError('发布失败,请重试')
+ })
+ }
+ })
+ .catch(() => {
+ this.$modal.msgError('发布失败,请重试')
+ })
+ }
+ })
+ .catch(() => {
+ this.$modal.msgError('发布失败,请重试')
+ })
+ loading.close()
+ })
+ .catch(() => {
+ this.$message({
+ type: 'info',
+ message: '已取消发布情报板'
+ })
+ loading.close()
+ })
+ },
+ // 回读
+ onSubmit(deviceId) {
+ // this.submitButton = true
+ // // this.loading = true
+ // this.contentList = []
+ // // 获取情报板修改页面信息
+ // const param = {
+ // deviceId: deviceId
+ // }
+ /* await getBoardContentData(param)
+ .then(res => {
+ console.log(res, 'onSubmit')
+ var contents = res.data.parameters
+ console.log(contents, 'onSubmit-----contents')
+ for (let i = 0; i < contents.length; i++) {
+ let item = contents[i]
+ item.COLOR = this.getColorStyle(item.COLOR)
+ item.FONT_SIZE = Number(item.FONT_SIZE.substring(0, 2)) + 'px'
+ item.ID = i
+ item.FONT = this.getFont(item.FONT)
+ this.contentList.push(item)
+ }
+ console.log(this.contentList, 'onSubmit-----this.contentList')
+ this.loading = false
+ this.submitButton = false
+ // this.rowDrop();
+ })
+ .catch(e => {
+ this.loading = false
+ this.submitButton = false
+ })*/
+ getDeviceRealtimeProperty(deviceId, '3A', { async: false })
+ .then(res => {
+ console.log('回读消息------------------------')
+ var contentsA = res.data['3A'].content
+ console.log('回读消息--1111111111---', contentsA)
+
+ this.dialogInfoList = contentsA.map(item => {
+ return {
+ ...item,
+ stopTime: item.residenceTime,
+ inScreenMode: item.screenEntryMethod,
+ screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
+ tcontents: [
+ {
+ ...item,
+ fontSpacing: item.fontSpacing,
+ fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
+ fontType: item.font,
+ fontColor: item.foregroundColor.toUpperCase(),
+ formatStyle: item.horizontalAlignment,
+
+ content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
+ }
+ ]
+ }
+ })
+
+ console.log('回读处理后的数据', this.dialogInfoList)
+
+ // for (let i = 0; i < contents.length; i++) {
+ // let item = contents[i]
+ // item.COLOR = item.foregroundColor
+ // item.FONT_SIZE = item.fontSize + 'px'
+ // item.ID = i
+ // item.FONT = item.font
+ // item.COORDINATE = this.covering(item.xCoordinate) + this.covering(item.yCoordinate)
+ // ;(item.screenSize = item.displayAreaWidth + '*' + item.displayAreaHeight), (item.CONTENT = item.textContent.replaceAll('\\,', ','))
+ // item.CONTENT = item.CONTENT.replaceAll('\\=', '=')
+ // item.CONTENT = item.CONTENT.replaceAll('\\\\n', '\n')
+ // item.formatStyle = item.verticalAlignment
+ // this.contentList.push(item)
+
+ // this.form.devicePixel = item.screenSize
+ // }
+
+ // console.log(this.contentList, 'onSubmit-----this.contentList')
+ // this.rowDrop();
+
+ // this.loading = false
+ // this.submitButton = false
+ })
+ .catch(e => {
+ this.$modal.msgError('回读失败,请重试')
+ })
+ // this.deviceId = deviceId
+
+ // 根据情报板id获取分辨率
+ /*getBoardInfo(deviceId).then(res => {
+ console.log(res, 'getBoardInfo')
+ this.form.devicePixel = res.data.pixel
+ if (res.data.deviceId) {
+ this.disabledButton = false
+ } else {
+ this.disabledButton = true
+ }
+ })*/
},
// 获取模板头部
getTemplateHeaderFn() {
@@ -324,16 +524,22 @@ export default {
addInfo(form) {
console.log('待发新增', form)
this.dialogInfoList.push({
+ id: form.id,
+ screenSize: form.screenSize,
+ COORDINATE: form.coordinate,
...form,
+ tcontents: [{ ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }],
id: Math.floor(Math.random() * 10000000000000000),
txt: form.CONTENT,
fz: parseInt(form.FONT_SIZE.replace(/\D/g, '')),
fm: form.FONT,
+ formatStyle: form.formatStyle,
...this.processString(form.screenSize),
...this.processStrNum(form.COORDINATE)
})
- this.getTemplateHeaderFn()
- console.log(this.dialogInfoList)
+ console.log('新增模板111', this.dialogInfoList)
+ // this.getTemplateHeaderFn()
+ // console.log(this.dialogInfoList)
// form.ID = this.contentList.length
// this.contentList.push(deepClone(form))
// this.$message.success('添加成功')
@@ -345,9 +551,10 @@ export default {
},
// 修改弹窗
editOutline(item, index, type) {
+ this.showEmit = true
this.index = index
this.editType = type
- console.log(item, '修改弹窗')
+ console.log('修改弹窗', item)
this.boardEmitItem = {
FONT_SIZE: item.tcontents[0].fontSize + 'px',
COLOR: item.tcontents[0].fontColor,
@@ -355,6 +562,7 @@ export default {
COORDINATE: item.tcontents[0].coordinate,
FONT: this.getFont(item.tcontents[0].fontType),
SPEED: item.tcontents[0].fontSpacing,
+ formatStyle: item.tcontents[0].formatStyle,
ACTION: item.inScreenMode, //出屏方式
STAY: item.stopTime, //停留时间
type: type,
@@ -363,7 +571,6 @@ export default {
id: item.id,
tcontentsId: item.tcontents[0].id
}
- this.showEmit = true
},
// // // 待下发 编辑
// openQbbDrawer(item, index, type) {
@@ -379,14 +586,16 @@ export default {
// 接收子组件form表单 修改
receiveForm(form) {
console.log('接收子组件form表单 修改111111111', form)
+ this.formData = form
console.log('开始的数据', this.dialogInfoList)
this.dialogInfoList = this.dialogInfoList.map(item => {
if (item.id === form.id) {
- return { ...item, tcontents: [{ ...item.tcontents[0], ...form, content: form.CONTENT }] }
+ return { ...item, tcontents: [{ ...item.tcontents[0], ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }] }
}
return item
})
- this.getTemplateHeaderFn()
+ console.log('修改后的数据', this.dialogInfoList)
+ // this.getTemplateHeaderFn()
this.$forceUpdate()
},
dialogClose() {
@@ -482,6 +691,33 @@ export default {
} else {
return font
}
+ },
+ // 转报文 字体
+ getFontValue(font) {
+ if (font == '黑体' || font == 'SimHei') return '1'
+ if (font == '楷体' || font == 'KaiTi') return '2'
+ if (font == '仿宋' || font == 'FangSong') return '4'
+ if (font == '隶书' || font == 'LiSu') return '5'
+ else return '3' //宋体
+ },
+
+ // 转报文 色号
+ getColorValue(color) {
+ if (color == '蓝色' || color == 'blue') return '0000FF'
+ if (color == '绿色' || color == '#00FF00' || color == 'GreenYellow') return '00FF00'
+ if (color == '红色' || color == 'red') return 'FF0000'
+ if (color == '黄色' || color == 'yellow') return 'FFFF00'
+ return 'FFFFFF' //白色
+ },
+ // 居中
+ getTextAlign(font) {
+ if (font == '0') {
+ return 'left'
+ } else if (font == '1') {
+ return 'right'
+ } else {
+ return 'center'
+ }
}
}
}
@@ -921,9 +1157,9 @@ export default {
background-color: #000;
line-height: 1;
// text-align: center;
- // display: flex;
+ display: flex;
// justify-content: center;
- // align-items: center;
+ align-items: center;
}
.show_r_btn {
diff --git a/ruoyi-ui/src/views/map/index.vue b/ruoyi-ui/src/views/map/index.vue
index 518127d2..8f815035 100644
--- a/ruoyi-ui/src/views/map/index.vue
+++ b/ruoyi-ui/src/views/map/index.vue
@@ -16,24 +16,28 @@ export default {
addMarkDataList: [],
markDataList: [
{
- id: 1601,
- tit: '服务区',
+ id: 2001,
+ ids: '65',
+ tit: '门架式可变信息标志K103+900',
longitude: 116.86532,
latitude: 36.57979,
screenSize: '768*64',
+
imgUrl: require('@/assets/screen/xtb/fwqdot.png')
},
{
- id: 1601,
- tit: '立交',
+ id: 2002,
+ ids: '595',
+ tit: '门架式可变信息标志K57+595',
longitude: 116.665377,
latitude: 36.396199,
- screenSize: '192*160',
+ screenSize: '768*64',
imgUrl: require('@/assets/screen/xtb/ljdot.png')
},
{
- id: 1601,
- tit: '收费站',
+ id: 2003,
+ tit: '',
+ ids: '',
longitude: 116.500411,
latitude: 36.297617,
screenSize: '480*48',