Browse Source

情报板部分完成

wangqin
hui 11 months ago
parent
commit
ed213fa807
  1. 2
      ruoyi-ui/public/static/systemConfig.js
  2. 20
      ruoyi-ui/src/api/board/board.js
  3. BIN
      ruoyi-ui/src/assets/jihe/images/button/delete.png
  4. BIN
      ruoyi-ui/src/assets/jihe/images/button/edit.png
  5. BIN
      ruoyi-ui/src/assets/jihe/images/button/edit2.png
  6. BIN
      ruoyi-ui/src/assets/jihe/images/button/edit4.png
  7. BIN
      ruoyi-ui/src/assets/jihe/images/button/toLeft.png
  8. BIN
      ruoyi-ui/src/assets/jihe/images/button/toLeft2.png
  9. 28
      ruoyi-ui/src/common/boardBaseData.js
  10. 2
      ruoyi-ui/src/main.js
  11. 100
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue
  12. 973
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo copy.vue
  13. 746
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue
  14. 1131
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
  15. 116
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/device.js
  16. 59
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/direction.js
  17. 164
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js
  18. 116
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/templateCategory.js
  19. 4
      ruoyi-ui/src/views/login.vue
  20. 5
      ruoyi-ui/vue.config.js

2
ruoyi-ui/public/static/systemConfig.js

@ -27,7 +27,7 @@ const systemConfig = {
title0: '管理系统',
url0: 'ry',
navBarShow0: {bigScreen: 'false', frontPage: 'true', doc: 'true',weather:'true',breadcrumb:'true'},
title1: '智慧隧道综合管控平台',
title1: '济菏数字运营管理平台',
url1: "athena",
navBarShow1: {bigScreen: 'false', frontPage: 'false', doc: 'false',weather:'false',breadcrumb:'true'},

20
ruoyi-ui/src/api/board/board.js

@ -1,10 +1,24 @@
import request from '@/utils/request'
// 查询设备列
// 查询设备列表
export function getBoardList(query) {
return request({
url: '/iot/board/list',
url: '/business/device/query',
method: 'get',
params: query
params: {
...query,
deviceType:2
}
})
}
// 查询模板列表
export function getTemplateList(query) {
return request({
url: '/business/boardTemplate/getAllVmsTemplate',
method: 'get',
params: {
...query
}
})
}

BIN
ruoyi-ui/src/assets/jihe/images/button/delete.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 654 B

BIN
ruoyi-ui/src/assets/jihe/images/button/edit.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 720 B

BIN
ruoyi-ui/src/assets/jihe/images/button/edit2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 859 B

BIN
ruoyi-ui/src/assets/jihe/images/button/edit4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 B

BIN
ruoyi-ui/src/assets/jihe/images/button/toLeft.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 B

BIN
ruoyi-ui/src/assets/jihe/images/button/toLeft2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 939 B

28
ruoyi-ui/src/common/boardBaseData.js

@ -0,0 +1,28 @@
import Vue from "vue";
import { getDicts } from "@/api/system/dict/data";
export default function(){
getDicts('iot_device_font_type').then(res => {
let dic = {};
res.data.forEach(item=>{
dic[item.dictValue] = item.cssClass;
});
Vue.prototype.fontTypeDic = dic;
Vue.prototype.fontTypeList = res.data;
console.log(dic , "++==================");
// console.log(fontTypeList, "字体类型");
})
getDicts('iot_devices_font_color').then(res => {
})
getDicts('iot_device_font_inScreen_mode').then(res => {
})
getDicts('iot_template_category').then(res => {
})
getDicts('iot_device_font_size').then(res => {
})
}

2
ruoyi-ui/src/main.js

@ -90,6 +90,8 @@ Vue.prototype.handleTree = handleTree
Vue.prototype.socket = Socket
Vue.prototype.numberMul = numberMul
import boardBaseData from '@/common/boardBaseData'
boardBaseData();
// gis
Vue.prototype.$GlobalConfig = config.GlobalConfig

100
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardPreview.vue

@ -0,0 +1,100 @@
<template>
<div class="boardPreview" ref="compBox">
<div class="boardBox" :style="boardStyle">
<span class="boardTxt" :style="boardTxtStyle" v-html="tpl.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
</div>
</div>
</template>
<script>
export default {
name:"BoardPreview",
data(){
return {
boardStyle:null,
boardTxtStyle:null
}
},
props:{
boardWH: {
type: String,
default: "300*200"
},
tpl: {
// {
// "id": 3,
// "category": "0",
// "content": "",
// "screenSize": "768*64",
// "fontColor": "FFFF00",
// "fontSize": "64",
// "fontType": "2",
// "fontSpacing": "0",
// "rollingSpeed": null,
// "stopTime": "50",
// "inScreenMode": "1",
// "formatStyle": "2",
// "remark": null,
// "createTime": "2024-01-06 10:40:19",
// "updateTime": "2024-01-06 11:04:53"
// }
type: Object,
default: {}
},
},
watch:{
boardWH:{
handler(newV){
this.boardScale();
},
immediate:true
}
},
computed:{
},
mounted(){
},
methods:{
boardScale() {
this.$nextTick(() => {
let boxW = this.$refs["compBox"].offsetWidth;
let boxH = this.$refs["compBox"].offsetHeight;
let arr = this.boardWH.split("*");
let scale = 1;
if (arr[0] / arr[1] > boxW / boxH) {
scale = boxW / arr[0];
} else {
scale = boxH / arr[1];
}
this.boardStyle = {
width: `${arr[0] * scale}px`,
height: `${arr[1] * scale}px`
}
this.boardTxtStyle = {
"color": "#" + this.tpl.fontColor,
"font-size": `${this.tpl.fontSize * scale}px`,
"font-family": this.fontTypeDic[this.tpl.fontType],
// "fontSpacing": "0",
// "rollingSpeed": null,
// "stopTime": "50",
// "inScreenMode": "1",
// "formatStyle": "2",
}
})
}
}
}
</script>
<style lang="scss" scoped>
.boardPreview{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.boardBox {
background-color: #000;
.boardTxt{
color: #f00;
}
}
}
</style>

973
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo copy.vue

@ -0,0 +1,973 @@
<template>
<div class="container infoBoardDialog">
<!-- 添加信息弹窗 -->
<el-dialog title="新增" :visible.sync="dialogVisible" width="43%" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
<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',
position: 'relative',
textAlign: getTextAlign(dataForm.formatStyle)
}" class="blackBoard2">
<span :style="{
color: getColorStyle(dataForm.COLOR),
fontSize: dataForm.FONT_SIZE,
fontFamily: dataForm.FONT,
zIndex: '1000',
position:'relative',
/*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="0">左对齐</el-radio-button>
<el-radio-button :label="2">左右居中</el-radio-button>
<el-radio-button :label="1">右对齐</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.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_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" style="background-color: #10aac2;color:#fff;" class="submitButton">确认
</el-button>
<el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @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: 'FFFF00',
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: 'FFFF00',
FONT: '黑体',
SPEED: '1',
ACTION: '1',
// COORDINATE: "",
STATE: 'true',
STAY: '5',
screenSize: devicePixel,
formatStyle: '2'
}
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[1].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'
},
{
device_pixel: '160*80'
}
]
// 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('情报板所属类别不能为空')
}
if (this.dataForm.CONTENT.indexOf('\\')>0) {
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) * 10
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) * 10,
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) * 10
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) * 10,
vmsType: '',
width: ''
}
const templateContent = []
templateContent.push({
content: this.dataForm.CONTENT,
coordinate: this.dataForm.COORDINATE,
fontColor: 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) {
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 == '黄色' || font == 'yellow') {
return '#FFFF00'
} else if (font == '红色' || font == 'red') {
return '#FF0000'
} else if (font == '绿色' || font == 'GreenYellow') {
return '#00FF00'
} else if (font == '蓝色' || font == 'blue') {
return '#0000FF'
} else {
return '#' + font
}
},
getTextAlign(font) {
if (font == '0') {
return 'left'
} else if (font == '1') {
return 'right'
} else {
return 'center'
}
},
//
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 0:
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 1:
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
if (alignmentNum != undefined) {
this.dataForm.formatStyle = alignmentNum
}
// 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;
}
//
::v-deep .el-dialog__header {
background-color: #145977;
}
::v-deep .el-dialog__body {
padding: 5px 20px;
background-color: #145977;
}
::v-deep .el-dialog__footer {
background-color: #145977;
}
::v-deep .el-card {
margin-top: 1vh;
background-color: #145977;
border: 2px solid #1d7890;
}
::v-deep .el-form-item__label {
color: #3de8ff;
}
::v-deep .el-input--mini .el-input__inner {
color: #fff;
background-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
color: #fff;
background-color: #096d8c;
}
::v-deep .el-dialog__title {
color: #fff;
}
::v-deep .el-textarea__inner {
color: #fff;
background-color: #096d8c;
border-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
border-color: transparent;
}
::v-deep .el-input-number.is-controls-right .el-input-number__increase {
border-color: transparent;
color: #fff;
background-color: #096d8c;
}
::v-deep .el-button--medium {
padding: 5px 25px;
font-size: 14px;
border-radius: 20px;
border: transparent;
}
::v-deep .el-radio-button__inner {
color: #ffffff;
background-color: pink;
border-color: #1d58a9;
-webkit-box-shadow: -1px 0 0 0 #1d58a9;
box-shadow: -1px 0 0 0 #1d58a9;
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
border-radius: 3px 3px 3px 3px;
opacity: 1;
border: none !important;
}
::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
margin: 0 3px;
}
</style>

746
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/addinfo.vue

@ -1,155 +1,102 @@
<template>
<div class="container infoBoardDialog">
<!-- 添加信息弹窗 -->
<el-dialog title="新增" :visible.sync="dialogVisible" width="43%" :before-close="handleClose" :close-on-click-modal="false" append-to-body>
<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',
position: 'relative',
textAlign: getTextAlign(dataForm.formatStyle)
}" class="blackBoard2">
<span :style="{
color: getColorStyle(dataForm.COLOR),
fontSize: dataForm.FONT_SIZE,
fontFamily: dataForm.FONT,
zIndex: '1000',
position:'relative',
/*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>
<el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="43%" append-to-body :close-on-click-modal="false">
<div class="dialogStyleBox">
<div class="dialogLine"></div>
<div class="dialogCloseButton"></div>
</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="0">左对齐</el-radio-button>
<el-radio-button :label="2">左右居中</el-radio-button>
<el-radio-button :label="1">右对齐</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.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_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-card class="box-card">
<BoardPreview></BoardPreview>
</el-card>
<el-card>
<el-form :model="dataForm" :rules="dataRule" label-width="90px" ref="dataForm" size="mini">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="所属类别" v-if="type == 'template'">
<el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini">
<el-option v-for="item in templateCategoryList" :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="dataForm.textAlign">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="center">中间对齐</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
</el-radio-group>
</el-col>
</el-row>
<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 :gutter="24" style="display: flex; flex-wrap: wrap;width:100%">
<el-col :span="24">
<el-form-item label="详细内容" prop="content">
<el-input type="textarea" placeholder="详细内容" v-model="dataForm.content"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="字体颜色">
<el-select v-model="dataForm.color" filterable placeholder="请选择">
<el-option v-for="item in colorList" :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 label="字体大小">
<el-select v-model="dataForm.fontSize" style="width: 100%">
<el-option v-for="item in fontSizeList" :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 label="字体类型">
<el-select v-model="dataForm.fontFamily" placeholder="请选择">
<el-option v-for="item in fontTypeList" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-col :span="8">
<el-form-item label="停留时间(秒)">
<el-input-number :min="0" v-model="dataForm.stay" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="入屏方式">
<el-select v-model="dataForm.inScreenMode" placeholder="请选择">
<el-option v-for="item in inScreenModeList" :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 label="屏幕尺寸">
<el-select v-model="screenSize" placeholder="请选择" disabled>
<el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button @click="dataFormSubmitHandle()" v-loading="loading" style="background-color: #10aac2;color:#fff;" class="submitButton">确认
</el-button>
<el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="handleClose">取消</el-button>
</div>
</el-dialog>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dataFormSubmitHandle" v-loading="loading" style="background-color: #10aac2;color:#fff;">确认</el-button>
<el-button class="closeButton" style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button>
</div>
</el-dialog>
</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'
import BoardPreview from "./BoardPreview.vue"
export default {
data() {
return {
radio1: '2',
alignmentNum: 2,
content: '',
boardWidth: '',
@ -171,7 +118,6 @@ export default {
],
listquery: [], //
curDragImgItem: '',
visible: false,
startTxt_x: '000',
startTxt_y: '000',
width: '400',
@ -185,77 +131,31 @@ export default {
url: '',
previewContent: '', //
ispreviewContent: -1,
dataForm: {},
dataForm: {
category:"",
textAlign:"center",
content:"",
color:"",
fontSize:"",
fontFamily:"",
stay:5,
inScreenMode:"",
screenSize:""
},
templateContent: [],
templateDelContent: [],
dataRule: {
screenSize: [
{
required: true,
message: '请选择分辨率',
trigger: 'blur'
}
],
CONTENT: [
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: [],
fontTypeList: [],
screenSizeOptions: [],
colorOptions: [],
colorList: [],
isCurrencyOptions: [
{
code: '0',
@ -266,7 +166,7 @@ export default {
content: '仅为智能推荐模板'
}
],
inScreenModeOptions: [],
inScreenModeList: [],
imgSize: [
{
type: '1024*128',
@ -277,57 +177,41 @@ export default {
name: '正常'
}
],
fontSizeOpt: [],
fontSizeList: [],
title: '选择图片',
loading: false,
isAdd: false,
iotTemplateCategoryList: [],
templateCategoryList: [],
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(); //
// };
// },
// },
props:{
mode:{
type:String,
default:""
},
type: {
type: String,
default: ""
},
visible:{
type:Boolean,
default:false
},
screenSize:{
type:String,
default:""
},
tpl:{
type:Object,
default:()=>{}
}
},
components:{
BoardPreview
},
computed: {
divStyle: function () {
return {
@ -337,220 +221,82 @@ export default {
}
},
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);
// }
// },
// },
visible:{
handler(newV){
this.dialogVisible = newV;
},
immediate:true
},
dialogVisible(newV){
this.$emit("update:visible", newV);
},
"tpl.id":{
handler(newV){
// { "id": 3, "category": "0", "content": "", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" }
if(this.mode == "edit"){
this.____convertData();
}
}
}
},
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.fontTypeList = res.data
this.dataForm.fontFamily = res.data[0].dictValue;
// console.log(this.fontTypeList, "");
})
this.getDicts('iot_devices_font_color').then(res => {
this.colorOptions = res.data
// console.log(this.colorOptions, "");
this.colorList = res.data;
this.dataForm.color = res.data[0].dictValue;
// console.log(this.colorList, "");
})
this.getDicts('iot_device_font_inScreen_mode').then(res => {
this.inScreenModeOptions = res.data
// console.log(this.inScreenModeOptions, "");
this.inScreenModeList = res.data
this.dataForm.inScreenMode = res.data[0].dictValue;
// console.log(this.inScreenModeList, "");
})
this.getDicts('iot_template_category').then(res => {
this.templateCategoryList = res.data;
this.dataForm.category = res.data[0].dictValue;
})
this.getDicts('iot_device_font_size').then(res => {
this.fontSizeList = res.data;
this.dataForm.fontSize = res.data[0].dictValue;
// this.dataForm.FONT_SIZE = res.data[1].dictValue
})
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
____convertData(){
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: 'FFFF00',
FONT: '黑体',
SPEED: '1',
ACTION: '1',
// COORDINATE: "",
STATE: 'true',
STAY: '5',
screenSize: devicePixel,
formatStyle: '2'
}
this.content = '请输入内容'
} else {
// this.getInfo();
// this.$refs["dataForm"] && this.$refs["dataForm"].clearValidate();
}
})
if (this.dataForm.screenSize) {
this.getFontSizeList(1)
}
this.$forceUpdate()
},
onClose(){
this.dialogVisible = false;
},
getFontSizeList(type) {
this.getDicts('iot_device_font_size').then(res => {
this.fontSizeOpt = res.data
this.dataForm.FONT_SIZE = res.data[1].dictValue
if (type) {
this.alignment(2)
}
})
//TODO
/*getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => {
console.log(res, "根据分辨率筛字体大小");
this.fontSizeOpt = res.data.fontSizeList;
this.fontSizeList = 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'
},
{
device_pixel: '160*80'
}
]
// 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()) {
if (!this.dataForm.content.trim()) {
return this.$modal.msgError('当前输入内容为空')
} else if (!this.dataForm.category && this.infoType == 2) {
return this.$modal.msgError('情报板所属类别不能为空')
}
if (this.dataForm.CONTENT.indexOf('\\')>0) {
return this.$modal.msgError("内容不能含有特殊字符'\\'")
if (this.dataForm.content.indexOf('\\')>=0) {
return this.$modal.msgError("内容不能含有特殊字符'\\\\'")
}
this.$emit("submit");
//
/*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
if (response.data == 0) {
@ -711,152 +457,6 @@ export default {
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 == '黄色' || font == 'yellow') {
return '#FFFF00'
} else if (font == '红色' || font == 'red') {
return '#FF0000'
} else if (font == '绿色' || font == 'GreenYellow') {
return '#00FF00'
} else if (font == '蓝色' || font == 'blue') {
return '#0000FF'
} else {
return '#' + font
}
},
getTextAlign(font) {
if (font == '0') {
return 'left'
} else if (font == '1') {
return 'right'
} else {
return 'center'
}
},
//
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 0:
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 1:
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
if (alignmentNum != undefined) {
this.dataForm.formatStyle = alignmentNum
}
// 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>

1131
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue

File diff suppressed because it is too large

116
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/device.js

@ -0,0 +1,116 @@
export default [
{
"id": 894,
"iotDeviceId": "8162-65535",
"groupId": null,
"productId": 0,
"stakeMarkId": "k57+595",
"direction": "1",
"deviceName": "门架式可变信息标志k57+595",
"deviceType": 2,
"installationDate": null,
"productionDate": null,
"durableYears": null,
"installationSite": null,
"useState": null,
"otherConfig": "{\"screenSize\":\"768*64\"}",
"remark": null,
"createTime": "2024-01-10T15:27:34.000+08:00",
"updateTime": null
},
{
"id": 895,
"iotDeviceId": "8166-65535",
"groupId": null,
"productId": 0,
"stakeMarkId": "k71+600",
"direction": "1",
"deviceName": "门架式可变信息标志k71+600",
"deviceType": 2,
"installationDate": null,
"productionDate": null,
"durableYears": null,
"installationSite": null,
"useState": null,
"otherConfig": "{\"screenSize\":\"768*64\"}",
"remark": null,
"createTime": "2024-01-10T15:27:34.000+08:00",
"updateTime": null
},
{
"id": 896,
"iotDeviceId": "2161-65535",
"groupId": null,
"productId": 0,
"stakeMarkId": "k82+285",
"direction": "1",
"deviceName": "门架式可变信息标志k82+285",
"deviceType": 2,
"installationDate": null,
"productionDate": null,
"durableYears": null,
"installationSite": null,
"useState": null,
"otherConfig": "{\"screenSize\":\"768*64\"}",
"remark": null,
"createTime": "2024-01-10T15:27:34.000+08:00",
"updateTime": null
},
{
"id": 902,
"iotDeviceId": "31115-65535",
"groupId": null,
"productId": 0,
"stakeMarkId": "k98+208",
"direction": "1",
"deviceName": "门架式可变信息标志k98+208",
"deviceType": 2,
"installationDate": null,
"productionDate": null,
"durableYears": null,
"installationSite": null,
"useState": null,
"otherConfig": "{\"screenSize\":\"768*64\"}",
"remark": null,
"createTime": "2024-01-10T15:48:59.000+08:00",
"updateTime": null
},
{
"id": 903,
"iotDeviceId": "31111-65535",
"groupId": null,
"productId": 0,
"stakeMarkId": "k103+900",
"direction": "1",
"deviceName": "门架式可变信息标志k103+900",
"deviceType": 2,
"installationDate": null,
"productionDate": null,
"durableYears": null,
"installationSite": null,
"useState": null,
"otherConfig": "{\"screenSize\":\"768*64\"}",
"remark": null,
"createTime": "2024-01-10T15:48:59.000+08:00",
"updateTime": null
},
{
"id": 904,
"iotDeviceId": "81221-65535",
"groupId": null,
"productId": 0,
"stakeMarkId": "k59+289",
"direction": "1",
"deviceName": "大学城入口站前板",
"deviceType": 2,
"installationDate": null,
"productionDate": null,
"durableYears": null,
"installationSite": null,
"useState": null,
"otherConfig": "{\"screenSize\":\"160*80\"}",
"remark": null,
"createTime": "2024-01-10T15:48:59.000+08:00",
"updateTime": null
}
]

59
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/direction.js

@ -0,0 +1,59 @@
export default [
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:16:24",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 286,
"dictSort": 0,
"dictLabel": "菏泽方向",
"dictValue": "1",
"dictType": "iot_board_direction",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:16:31",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 287,
"dictSort": 1,
"dictLabel": "济南方向",
"dictValue": "2",
"dictType": "iot_board_direction",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:16:39",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 288,
"dictSort": 2,
"dictLabel": "双向",
"dictValue": "3",
"dictType": "iot_board_direction",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
}
]

164
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/template.js

@ -0,0 +1,164 @@
export default [
{
"id": 3,
"category": "0",
"content": "保持车距,控制车速",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "64",
"fontType": "2",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:40:19",
"updateTime": "2024-01-06 11:04:53"
},
{
"id": 4,
"category": "0",
"content": "山东高速欢迎您",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "64",
"fontType": "3",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:40:44",
"updateTime": "2024-01-06 11:04:58"
},
{
"id": 5,
"category": "0",
"content": "山东高速热线:96659",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "64",
"fontType": "1",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:40:56",
"updateTime": "2024-01-06 11:05:24"
},
{
"id": 9,
"category": "0",
"content": "安全带=生命带,关键时刻能救命",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "48",
"fontType": "3",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:42:21",
"updateTime": "2024-01-06 11:05:15"
}
],
"1": [
{
"id": 6,
"category": "1",
"content": "前方施工,谨慎驾驶",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "64",
"fontType": "3",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:41:07",
"updateTime": "2024-01-06 11:05:36"
}
],
"2": [
{
"id": 2,
"category": "2",
"content": "雨天路滑,注意安全",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "64",
"fontType": "3",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:38:44",
"updateTime": "2024-01-06 11:05:52"
},
{
"id": 10,
"category": "2",
"content": "大雾天气\n减速慢行",
"screenSize": "160*80",
"fontColor": "FFFF00",
"fontSize": "40",
"fontType": "2",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:42:59",
"updateTime": "2024-01-06 11:05:48"
}
],
"3": [],
"4": [
{
"id": 8,
"category": "4",
"content": "前方发生火灾,请谨慎驾驶",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "64",
"fontType": "1",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:42:00",
"updateTime": null
}
],
"5": [
{
"id": 7,
"category": "5",
"content": "前方事故,减速慢行",
"screenSize": "768*64",
"fontColor": "FFFF00",
"fontSize": "64",
"fontType": "1",
"fontSpacing": "0",
"rollingSpeed": null,
"stopTime": "50",
"inScreenMode": "1",
"formatStyle": "2",
"remark": null,
"createTime": "2024-01-06 10:41:33",
"updateTime": null
}
]

116
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/testData/templateCategory.js

@ -0,0 +1,116 @@
export default[
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:14:32",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 280,
"dictSort": 0,
"dictLabel": "日常通用",
"dictValue": "0",
"dictType": "iot_template_category",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:14:41",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 281,
"dictSort": 1,
"dictLabel": "施工管控",
"dictValue": "1",
"dictType": "iot_template_category",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:14:50",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 282,
"dictSort": 2,
"dictLabel": "恶劣天气",
"dictValue": "2",
"dictType": "iot_template_category",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:14:59",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 283,
"dictSort": 3,
"dictLabel": "交通拥堵",
"dictValue": "3",
"dictType": "iot_template_category",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:15:08",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 284,
"dictSort": 4,
"dictLabel": "突发事件",
"dictValue": "4",
"dictType": "iot_template_category",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
},
{
"searchValue": null,
"createBy": "admin",
"createTime": "2023-12-22 15:15:16",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"dictCode": 285,
"dictSort": 5,
"dictLabel": "警情播报",
"dictValue": "5",
"dictType": "iot_template_category",
"cssClass": null,
"listClass": "default",
"isDefault": "N",
"status": "0",
"default": false
}
]

4
ruoyi-ui/src/views/login.vue

@ -101,8 +101,8 @@ export default {
title: "", //
cookiePassword: "",
loginForm: {
username: "", //admin
password: "", //admin123
username: "admin",
password: "admin123",
rememberMe: false,
code: "",
uuid: "",

5
ruoyi-ui/vue.config.js

@ -40,8 +40,9 @@ module.exports = {
// target: `http://192.168.0.182:8080`,
// target: `http://192.168.0.194:8080`,
// target: `http://10.0.81.201:8080`,
target: `http://10.168.77.209:8080`, // 刘朋
target: `http://10.168.73.36:8080`, // 周乐
// target: `http://10.168.73.36:8080`, // 周乐
target: `http://10.168.77.209:8080`,// 刘朋
// target: `http://10.168.66.196:8080`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",

Loading…
Cancel
Save