From 842c065db04943b813dc531a4a88bd9251249d45 Mon Sep 17 00:00:00 2001 From: IAMHERE <446961233@qq.com> Date: Thu, 28 Dec 2023 10:29:34 +0800 Subject: [PATCH] =?UTF-8?q?fix-=E6=9B=B4=E6=96=B0=E4=B8=80=E4=B8=8B=20?= =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=83=85=E6=8A=A5=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ruoyi-ui/src/views/boardView/addinfo.vue | 44 ++-- ruoyi-ui/src/views/boardView/editInfo.vue | 79 ++++--- ruoyi-ui/src/views/index.vue | 256 +++++++++++++++------- ruoyi-ui/src/views/map/index.vue | 3 + 4 files changed, 240 insertions(+), 142 deletions(-) diff --git a/ruoyi-ui/src/views/boardView/addinfo.vue b/ruoyi-ui/src/views/boardView/addinfo.vue index 5ce04e07..3eacc219 100644 --- a/ruoyi-ui/src/views/boardView/addinfo.vue +++ b/ruoyi-ui/src/views/boardView/addinfo.vue @@ -56,15 +56,6 @@ 左右居中 右对齐 - @@ -75,6 +66,23 @@ + + + + + + + + + + + + + + + + + @@ -105,23 +113,6 @@ - - - - - - - - - - - - - - - - - @@ -537,6 +528,7 @@ export default { } else if (!this.dataForm.category && this.infoType == 2) { return this.$modal.msgError('情报板所属类别不能为空') } + this.$emit('addInfo', this.dataForm) //走接口检验内容是否包含敏感字段 /*checkIotBoardContent(this.dataForm.CONTENT).then(response => { if (response.data == 0) { diff --git a/ruoyi-ui/src/views/boardView/editInfo.vue b/ruoyi-ui/src/views/boardView/editInfo.vue index ba7e20b3..5a1f7f7e 100644 --- a/ruoyi-ui/src/views/boardView/editInfo.vue +++ b/ruoyi-ui/src/views/boardView/editInfo.vue @@ -10,6 +10,9 @@
+ + + + + + + + + + + + + + + @@ -121,34 +153,7 @@ - - - - - - - - - - - - - - + -
@@ -189,11 +171,15 @@ 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 { getAllVmsTemplate, deleteTemplate } from '@/api//board/template.js' +import { getDicts } from '@/api/system/dict/data.js' export default { name: 'indexView', data() { return { - activeNames: [1001, 1002, 1003, 1004, 1005, 1006], + screenDataSize: '', + activeNames: [], showEmit: false, boardEmitItem: {}, //修改弹窗的数据 activeName: 'first', @@ -232,22 +218,24 @@ export default { { id: 39, name: '合流区', state: 0, imgList: [require('@/assets/screen/xtb/lcsb/hlq.png'), require('@/assets/screen/xtb/lcsb/hl.png')] } ], dialogInfoList: [], + moBanList: [], + moBanDataHandList: [], moBanDataList: [ { id: 1001, bt: '日常通用', mbList: [ - { id: 305, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }, - { id: 306, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' }, - { id: 307, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FF0000', fz: 60, align: 'center' }, - { id: 308, txt: '谨慎驾驶,
注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' } + { id: 305, txt: '谨慎驾驶', w: 768, h: 64, col: '#FFFF00', fz: 48, pdl: 288, pdt: 8, fm: '黑体' }, + { id: 306, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }, + { id: 307, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FF0000', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }, + { id: 308, txt: '谨慎驾驶,
注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' } ] }, - { id: 1002, bt: '施工管控', mbList: [{ id: 309, txt: '道路施工,
谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }, - { id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }, - { id: 1004, bt: '交通拥堵', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }, - { id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }, - { id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] } + { id: 1002, bt: '施工管控', mbList: [{ id: 309, txt: '道路施工,
谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }, + { id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }, + { id: 1004, bt: '交通拥堵', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }, + { id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }, + { id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] } ], tabInfoList: [ @@ -267,7 +255,10 @@ export default { // 计算属性 computed: {}, // 生命周期函数 - created() {}, + created() { + this.getTemplateHeaderFn() + // this.getTemplateFn() + }, // 侦听器 // watch: { // data: { @@ -288,18 +279,61 @@ export default { mapClickEvent(e) { console.log('父组件地图点位', e) this.dialogInfoLeft = true + this.screenDataSize = e.target._opts.extData.screenSize + this.getTemplateHeaderFn() // this.mapDialogTop = e.pixel.y + 'px' // this.mapDialogLeft = e.pixel.x + 'px' // this.$refs.mapDialog.style.top = e.pixel.y + 'px' // this.$refs.mapDialog.style.left = e.pixel.x + 'px' // console.log(this.$refs.mapDialog) }, + // 信息发布 + InformationReleaseFn() { + invokedFunction('65', '').then(res => { + console.log(res) + }) + }, + // 获取模板头部 + getTemplateHeaderFn() { + this.moBanList = [] + getDicts('iot_template_category').then(res => { + this.moBanDataHandList = res.data + this.activeNames = res.data.map(item => { + return item.dictCode + }) + this.getTemplateFn() + }) + }, + // 获取模板 + getTemplateFn() { + getAllVmsTemplate({ devicePixel: this.screenDataSize }).then(res => { + this.moBanList = this.moBanDataHandList.map((item, index) => { + if (item.dictSort === index) { + return { + ...item, + mbList: res.data[index] + } + } + }) + }) + }, panelChangeFn(val) { console.log(val) }, // 接收子组件新增待发模板 addInfo(form) { - console.log(form, '待发新增') + console.log('待发新增', form) + this.dialogInfoList.push({ + ...form, + id: Math.floor(Math.random() * 10000000000000000), + txt: form.CONTENT, + fz: parseInt(form.FONT_SIZE.replace(/\D/g, '')), + fm: form.FONT, + ...this.processString(form.screenSize), + ...this.processStrNum(form.COORDINATE) + }) + this.getTemplateHeaderFn() + console.log(this.dialogInfoList) // form.ID = this.contentList.length // this.contentList.push(deepClone(form)) // this.$message.success('添加成功') @@ -311,43 +345,49 @@ export default { }, // 修改弹窗 editOutline(item, index, type) { - // this.index = index - // this.editType = type - // console.log(item, '修改弹窗') - // this.boardEmitItem = { - // FONT_SIZE: item.tcontents[0].fontSize + 'px', - // COLOR: item.tcontents[0].fontColor, - // CONTENT: item.tcontents[0].content, - // COORDINATE: item.tcontents[0].coordinate, - // FONT: this.getFont(item.tcontents[0].fontType), - // SPEED: item.tcontents[0].fontSpacing, - // ACTION: item.inScreenMode, //出屏方式 - // STAY: item.stopTime, //停留时间 - // type: type, - // screenSize: item.screenSize, - // category: item.category, - // id: item.id, - // tcontentsId: item.tcontents[0].id - // } + this.index = index + this.editType = type + console.log(item, '修改弹窗') + this.boardEmitItem = { + FONT_SIZE: item.tcontents[0].fontSize + 'px', + COLOR: item.tcontents[0].fontColor, + CONTENT: item.tcontents[0].content, + COORDINATE: item.tcontents[0].coordinate, + FONT: this.getFont(item.tcontents[0].fontType), + SPEED: item.tcontents[0].fontSpacing, + ACTION: item.inScreenMode, //出屏方式 + STAY: item.stopTime, //停留时间 + type: type, + screenSize: item.screenSize, + category: item.category, + id: item.id, + tcontentsId: item.tcontents[0].id + } this.showEmit = true }, - // 待下发 编辑 - openQbbDrawer(item, index, type) { - // this.index_ = index - // console.log(item) - // this.boardEmitItem = item - // this.boardEmitItem.screenSize = this.form.devicePixel - // this.boardEmitItem.deviceId = this.deviceId - // this.boardEmitItem.type = type + // // // 待下发 编辑 + // openQbbDrawer(item, index, type) { + // this.index_ = index + // console.log(item) + // this.boardEmitItem = item + // this.boardEmitItem.screenSize = this.form.devicePixel + // this.boardEmitItem.deviceId = this.deviceId + // this.boardEmitItem.type = type - this.showEmit = true - }, + // this.showEmit = true + // }, // 接收子组件form表单 修改 receiveForm(form) { - console.log(form, '接收子组件form表单 修改') - // this.contentList.splice(this.index_, 1, form) - // this.$forceUpdate() - // this.allVmsTemplate('no') + console.log('接收子组件form表单 修改111111111', 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 + }) + this.getTemplateHeaderFn() + this.$forceUpdate() }, dialogClose() { this.showEmit = false @@ -357,15 +397,21 @@ export default { // }, 500) }, delMoFn(item) { - this.$confirm('确认要删除吗？') - .then(_ => { - this.removeItemById(this.dialogInfoList, item.id) - this.$message({ - message: '删除成功!', - type: 'success' - }) - }) - .catch(_ => {}) + console.log(item) + // deleteTemplate(item.tcontents[0].templateId) + this.removeItemById(this.dialogInfoList, item.id) + + // this.$confirm('确认要删除吗？') + // .then(_ => { + // console.log(item) + // // deleteTemplate(item.tcontents[0].templateId) + // this.removeItemById(this.dialogInfoList, item.id) + // this.$message({ + // message: '删除成功!', + // type: 'success' + // }) + // }) + // .catch(_ => {}) }, putLeftFn(item) { console.log('点击事件', item) @@ -398,6 +444,44 @@ export default { } else if (w > 191) { return 1 } + }, + processString(str, x) { + const parts = str.split('*') // 将字符串按照 '*' 分割成数组 + const w = parseInt(parts[0]) // 将第一个部分解析为整数 + const h = parseInt(parts[1]) // 将第二个部分解析为整数 + if (x === 'w') { + return w + } else if (x === 'h') { + return h + } else { + return { w, h } // 返回包含 w 和 h 属性的对象 + } + }, + processStrNum(str, x) { + const pdl = parseInt(str.slice(0, 3)) // 截取前三位并解析为整数 + const pdt = parseInt(str.slice(3)) // 截取后三位并解析为整数 + if (x === 'l') { + return pdl + } else if (x === 't') { + return pdt + } else { + return { pdl, pdt } // 返回包含 pdl 和 pdt 属性的对象 + } + }, + getFont(font) { + if (font == 'KaiTi' || font == 'k') { + return '楷体' + } else if (font == 'SimSun' || font == 's') { + return '宋体' + } else if (font == 'SimHei' || font == 'h') { + return '黑体' + } else if (font == 'FangSong' || font == 'f') { + return '仿宋' + } else if (font == 'LiSu' || font == 'l') { + return '隶书' + } else { + return font + } } } } @@ -819,6 +903,7 @@ export default { padding: 0.2vh 0; display: flex; justify-content: center; + align-items: center; } .dialog_info_left_show_r { width: 5vw; @@ -833,11 +918,12 @@ export default { height: 100%; font-size: 18px; color: #ff0000; - text-align: center; background-color: #000; - display: flex; - justify-content: center; - align-items: center; + line-height: 1; + // text-align: center; + // display: flex; + // justify-content: 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 a4188712..518127d2 100644 --- a/ruoyi-ui/src/views/map/index.vue +++ b/ruoyi-ui/src/views/map/index.vue @@ -20,6 +20,7 @@ export default { tit: '服务区', longitude: 116.86532, latitude: 36.57979, + screenSize: '768*64', imgUrl: require('@/assets/screen/xtb/fwqdot.png') }, { @@ -27,6 +28,7 @@ export default { tit: '立交', longitude: 116.665377, latitude: 36.396199, + screenSize: '192*160', imgUrl: require('@/assets/screen/xtb/ljdot.png') }, { @@ -34,6 +36,7 @@ export default { tit: '收费站', longitude: 116.500411, latitude: 36.297617, + screenSize: '480*48', imgUrl: require('@/assets/screen/xtb/sfzdot.png') } ]