|
|
|
@ -19,15 +19,15 @@ |
|
|
|
</div> |
|
|
|
<div class="dialog_info_left_show"> |
|
|
|
<div v-if="dialogInfoList.length > 0" class="dialog_info_left_show_box" style="height: 100%;"> |
|
|
|
<div class="dialog_info_left_show_box_item" v-for="item in dialogInfoList" :key="item.id"> |
|
|
|
<div class="dialog_info_left_show_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':item.w / getScrollSz(item.w)+'px','height':item.h / getScrollSz(item.w)+'px',}"> |
|
|
|
<div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':item.fz / getScrollSz(item.w)+'px',color:item.col}" v-html="item.txt"></div> |
|
|
|
<div 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> |
|
|
|
</div> |
|
|
|
<div class="dialog_info_left_show_r"> |
|
|
|
<div @click="editOutline(item)" class="show_r_btn dialog_info_left_show_r_btn1"></div> |
|
|
|
<div @click="delMoFn(item)" class="show_r_btn dialog_info_left_show_r_btn2"></div> |
|
|
|
<div @click="editOutline(i)" class="show_r_btn dialog_info_left_show_r_btn1"></div> |
|
|
|
<div @click="delMoFn(i)" class="show_r_btn dialog_info_left_show_r_btn2"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -49,7 +49,7 @@ |
|
|
|
</div> |
|
|
|
<div class="dialog_info_left_show_bottom_btn"> |
|
|
|
<div class="show_bottom_btn_add" @click="addMoDataInfoFn(2,2)">添加信息</div> |
|
|
|
<div class="show_bottom_btn_del">信息发布</div> |
|
|
|
<div class="show_bottom_btn_del" @click="InformationReleaseFn">信息发布</div> |
|
|
|
</div> |
|
|
|
<div class="dialog_info_left_show_ce" @click="showCeInfoFn"> |
|
|
|
<img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt="" :style="{'transform':dialogInfoRight ? 'rotate(0deg)': 'rotate(180deg)'}"> |
|
|
|
@ -60,13 +60,13 @@ |
|
|
|
<transition name="el-zoom-in-center"> |
|
|
|
<div v-if="dialogInfoRight" class="dialog_info_right"> |
|
|
|
<el-collapse v-model="activeNames" @change="panelChangeFn"> |
|
|
|
<el-collapse-item v-for="item in moBanDataList" :key="item.id" :title="item.bt" :name="item.id"> |
|
|
|
<el-collapse-item v-for="item in moBanList" :key="item.dictCode" :title="item.dictLabel" :name="item.dictCode"> |
|
|
|
<div class="dialog_info_right_show"> |
|
|
|
<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:17vw;"> |
|
|
|
<div class="dialog_info_left_show_l_xsq" :style="{'width':i.w / getScrollSz(i.w)+'px','height':i.h / getScrollSz(i.w)+'px',}"> |
|
|
|
<div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.fz / getScrollSz(i.w)+'px',color:i.col}" v-html="i.txt"></div> |
|
|
|
<div 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> |
|
|
|
</div> |
|
|
|
<div class="dialog_info_left_show_r" style="width: 3.5vw;"> |
|
|
|
@ -78,24 +78,6 @@ |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
|
|
|
|
<!-- <div v-for="item in moBanDataList" :key="item.id"> |
|
|
|
<div class="dialog_info_right_tit">{{ item.bt }}</div> |
|
|
|
<div class="dialog_info_right_show"> |
|
|
|
<div class="dialog_info_left_show_box"> |
|
|
|
<div class="dialog_info_left_show_box_item" v-for="i in item.mbList" :key="i.id"> |
|
|
|
<div class="dialog_info_left_show_l" style="width:17vw;"> |
|
|
|
<div class="dialog_info_left_show_l_xsq" :style="{'width':i.w / getScrollSz(i.w)+'px','height':i.h / getScrollSz(i.w)+'px',}"> |
|
|
|
<div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.fz / getScrollSz(i.w)+'px',color:i.col}" v-html="i.txt"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="dialog_info_left_show_r" style="width: 3.5vw;"> |
|
|
|
<div @click="putLeftFn(i)" class="show_r_btn dialog_info_left_show_r_btn3"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
</transition> |
|
|
|
</div> |
|
|
|
@ -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: '谨慎驾驶, <br/> 注意安全', 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: '谨慎驾驶, <br/> 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' } |
|
|
|
] |
|
|
|
}, |
|
|
|
{ id: 1002, bt: '施工管控', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }, |
|
|
|
{ id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }, |
|
|
|
{ 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: '道路施工, <br/> 谨慎驾驶', 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 { |
|
|
|
|
IAMHERE
11 months ago