You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
995 lines
31 KiB
995 lines
31 KiB
1 year ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<transition>
|
||
|
|
<div v-if="dialogInfoLeft" class="dialog_info">
|
||
|
|
<div class="dialog_info_left">
|
||
|
|
<div class="dialog_head">
|
||
|
|
<div class="tit">{{ dialogTit }}</div>
|
||
|
|
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeDialogBtnFn">
|
||
|
|
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="dialogContent">
|
||
|
|
<div v-if="dialogInfoList.length > 0" class="dialogContent_box" style="height: 100%;">
|
||
|
|
<div class="dialogContent_box_item" v-for="(item, i) in dialogInfoList" :key="i.id">
|
||
|
|
<div class="dialogContent_l">
|
||
|
|
<div class="dialogContent_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="dialogContent_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.replace(/\n|\r\n/g, '<br>').replace(
|
||
|
|
/ /g,
|
||
|
|
' ')"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="dialogContent_r">
|
||
|
|
<div @click="editOutline(i)" class="show_r_btn dialogContent_r_btn1"></div>
|
||
|
|
<div @click="delMoFn(i)" class="show_r_btn dialogContent_r_btn2"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="dialogContent_box" style="height: 100%;">
|
||
|
|
<div class="dialogContent_box_empty">暂无数据</div>
|
||
|
|
</div>
|
||
|
|
<div class="dialogContent_bottom">
|
||
|
|
<el-tabs v-model="activeName" @tab-click="tabClickFn">
|
||
|
|
<el-tab-pane label="详情信息" name="first">
|
||
|
|
<div class="show_bottom_tab_box">
|
||
|
|
<div class="show_bottom_tab_item" v-for="item in tabDataInfoList" :key="item.id">
|
||
|
|
<div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
|
||
|
|
<div class="show_bottom_tab_item_r" :style="{ 'color': item.col }"> {{ item.txt }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
<div class="dialogContent_bottom_btn">
|
||
|
|
<div class="show_bottom_btn_add" @click="addMoDataInfoFn(2, 2)">添加信息</div>
|
||
|
|
<div class="show_bottom_btn_del" @click="InformationReleaseFn">信息发布</div>
|
||
|
|
</div>
|
||
|
|
<div class="dialogContent_ce" @click="showCeInfoFn">
|
||
|
|
<img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt=""
|
||
|
|
:style="{ 'transform': dialogInfoRight ? 'rotate(0deg)' : 'rotate(180deg)' }">
|
||
|
|
<div class="show_ce_txt">信息模板</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 原型图上没有“附近相机”，代码里暂时关闭
|
||
|
|
<div class="dialogContent_ce" style="top:36%;" @click="showCameraInfoFn">
|
||
|
|
<img class="show_ce_img" src="@/assets/screen/xtb/leftd.png" alt=""
|
||
|
|
:style="{ 'transform': dialogInfoCamera ? 'rotate(0deg)' : 'rotate(180deg)' }">
|
||
|
|
<div class="show_ce_txt">附近像机</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 信息模板 -->
|
||
|
|
<div v-if="dialogInfoRight" class="dialog_info_right">
|
||
|
|
<el-collapse v-model="activeNames" @change="panelChangeFn">
|
||
|
|
<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="dialogContent_box" style="overflow-y: visible;">
|
||
|
|
<div class="dialogContent_box_item" v-for="i in item.mbList" :key="i.id">
|
||
|
|
<div class="dialogContent_l" style="width:16vw;">
|
||
|
|
<div class="dialogContent_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="dialogContent_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.replace(/\n|\r\n/g, '<br>').replace(
|
||
|
|
/ /g,
|
||
|
|
' ')"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="dialogContent_r" style="width: 3.5vw;">
|
||
|
|
<div @click="putLeftFn(i)" class="show_r_btn dialogContent_r_btn3"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-collapse-item>
|
||
|
|
</el-collapse>
|
||
|
|
</div>
|
||
|
|
<!-- 附近相机 -->
|
||
|
|
<div v-if="dialogInfoCamera" class="dialog_info_right" style="padding:0;">
|
||
|
|
<div class="dialog_head" style="height:4vh;">
|
||
|
|
<div class="tit">摄像机设备</div>
|
||
|
|
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeCameraBtnFn">
|
||
|
|
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="info_right_camera">
|
||
|
|
<div class="info_right_camera_top">
|
||
|
|
<!-- 视频组件 -->
|
||
|
|
<videoView :url="videoUrl" />
|
||
|
|
</div>
|
||
|
|
<div class="info_right_camera_bom">
|
||
|
|
<div class="camera_bom_left">
|
||
|
|
<div class="camera_bom_left_item">
|
||
|
|
<div class="camera_bom_left_item_txt">选择相机: </div>
|
||
|
|
<div class="camera_bom_left_item_val">
|
||
|
|
<el-select v-model="cameraVal" placeholder="请选择" size="mini" style="width:130px"
|
||
|
|
@change="cameraValChangeFn">
|
||
|
|
<el-option v-for="item in cameraOptList" :key="item.camId" :label="item.camName"
|
||
|
|
:value="item.camId">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="camera_bom_left_item" v-for="item in cameraDataVideoList" :key="item.id">
|
||
|
|
<div class="camera_bom_left_item_txt">{{ item.txt }}: </div>
|
||
|
|
<div class="camera_bom_left_item_val">{{ item.val }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="camera_bom_right">
|
||
|
|
<div class="camera_bom_right_t">
|
||
|
|
<div class="camera_bom_right_t_box"></div>
|
||
|
|
<div class="camera_bom_right_t_h_po" v-for="item in cameraBtnList" :key="item.id"
|
||
|
|
@click="cameraControlBtnFn(item)"
|
||
|
|
:style="{ 'left': item.le, top: item.to, 'transform': 'rotate(' + item.ro + 'deg)' }"></div>
|
||
|
|
</div>
|
||
|
|
<div class="camera_bom_right_b">
|
||
|
|
<div class="camera_bom_right_b_btn" v-for="item in cameraControlList" :key="item.id">
|
||
|
|
<div class="camera_bom_right_b_btn_l" @click="cameraControlLeFn(item.numL)"></div>
|
||
|
|
<div class="camera_bom_right_b_btn_c">{{ item.txt }}</div>
|
||
|
|
<div class="camera_bom_right_b_btn_r" @click="cameraControlLeFn(item.numR)"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
<!-- 情报板弹框中的弹框 -->
|
||
|
|
<addBoard ref="addinfo" @addInfo="addInfo" />
|
||
|
|
<editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import addBoard from './addinfo.vue'
|
||
|
|
import editBoard from './editInfo.vue'
|
||
|
|
import { listDevice, invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
|
||
|
|
export default {
|
||
|
|
name: 'InfoBoard',
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
dialogTit: '门架式可变信息标志YK16+270',
|
||
|
|
dialogInfoLeft: true,
|
||
|
|
dialogInfoRight: false,
|
||
|
|
dialogInfoCamera: false,
|
||
|
|
dialogInfoList:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 地图点位
|
||
|
|
mapClickEvent(e) {
|
||
|
|
this.dialogInfoList = []
|
||
|
|
console.log('父组件地图点位', e)
|
||
|
|
this.videoUrl = ''
|
||
|
|
this.cameraOptList = []
|
||
|
|
this.dialogInfoLeft = true
|
||
|
|
this.mapIds = e.target._opts.extData.deviceId
|
||
|
|
this.screenDataSize = e.target._opts.extData.sceenSize
|
||
|
|
this.dialogTit = e.target._opts.extData.deviceName
|
||
|
|
// this.tabDataInfoList = e.target._opts.extData
|
||
|
|
this.tabDataInfoList = [
|
||
|
|
{ id: 401, tit: '设备名称', txt: e.target._opts.extData.deviceName, col: '#fff' },
|
||
|
|
{ id: 402, tit: '道路名称', txt: e.target._opts.extData.roadName, col: '#fff' },
|
||
|
|
{ id: 403, tit: '所属机构', txt: e.target._opts.extData.organization, col: '#fff' },
|
||
|
|
{ id: 404, tit: '设备桩号', txt: e.target._opts.extData.pileNumber, col: '#fff' },
|
||
|
|
{ id: 405, tit: '设备厂商', txt: e.target._opts.extData.brind, col: '#fff' },
|
||
|
|
{ id: 406, tit: '设备状态', txt: e.target._opts.extData.deviceState == 'online' ? '在线' : '离线', col: e.target._opts.extData.deviceState == 'online' ? '#10d269' : '#888' }
|
||
|
|
]
|
||
|
|
this.getTemplateHeaderFn()
|
||
|
|
this.onSubmit(this.mapIds)
|
||
|
|
this.getEnergyCameraBoardFn(e.target._opts.extData.pileNumber)
|
||
|
|
// 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)
|
||
|
|
},
|
||
|
|
getEnergyCameraBoardFn(pileNumber) {
|
||
|
|
getEnergyCameraBoardAPi({ pileNum: pileNumber }).then(res => {
|
||
|
|
console.log('获取到附近的像机', res)
|
||
|
|
this.cameraVal = res.data[0].camId
|
||
|
|
this.cameraOptList = res.data
|
||
|
|
this.cameraValCha(this.cameraOptList, this.cameraVal)
|
||
|
|
this.getEnergyCameraVideoFn()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getEnergyCameraVideoFn() {
|
||
|
|
getEnergyCameraVideoAPi({ camId: this.cameraVal }).then(res => {
|
||
|
|
// console.log('获取到视频', res)
|
||
|
|
this.videoUrl = res.data.liveUrl
|
||
|
|
})
|
||
|
|
},
|
||
|
|
cameraControlBtnFn(item) {
|
||
|
|
this.getEnergyCameraControlFn(item.cmd, 5)
|
||
|
|
},
|
||
|
|
cameraControlLeFn(item) {
|
||
|
|
// console.log('按钮点击事件', item)
|
||
|
|
this.getEnergyCameraControlFn(item, 5)
|
||
|
|
},
|
||
|
|
getEnergyCameraControlFn(cmd, spe) {
|
||
|
|
getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => {
|
||
|
|
// console.log('控制返回结果', res)
|
||
|
|
// this.videoUrl = res.data.liveUrl
|
||
|
|
})
|
||
|
|
},
|
||
|
|
cameraValChangeFn() {
|
||
|
|
console.log('点击切换按钮', this.cameraVal)
|
||
|
|
this.cameraValCha(this.cameraOptList, this.cameraVal)
|
||
|
|
},
|
||
|
|
// cameraDataVideoList
|
||
|
|
cameraValCha(date, num) {
|
||
|
|
let str = {
|
||
|
|
0: '正常',
|
||
|
|
1: '网络中断',
|
||
|
|
2: '网络正常无图像',
|
||
|
|
3: '有图像图可能存在问题'
|
||
|
|
}
|
||
|
|
date.forEach(i => {
|
||
|
|
if (i.camId === num) {
|
||
|
|
this.cameraDataVideoList = [
|
||
|
|
{ id: 3001, txt: '设备名称', val: i.camName },
|
||
|
|
{ id: 3002, txt: '设备编号', val: i.camId },
|
||
|
|
{ id: 3003, txt: '设备桩号', val: i.pileNum },
|
||
|
|
{ id: 3005, txt: '道路名称', val: i.deptName },
|
||
|
|
{ id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 信息发布
|
||
|
|
InformationReleaseFn() {
|
||
|
|
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.STAY
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
|
||
|
|
invokedFunction(595, 11, { size: '65535', fileName: 'play099.lst' })
|
||
|
|
.then(res => {
|
||
|
|
debugger
|
||
|
|
// console.log('发布消息,校验文件名-------------')
|
||
|
|
if (res.data.result == '01') {
|
||
|
|
invokedFunction(595, 13, { parameters: newArr })
|
||
|
|
.then(res => {
|
||
|
|
debugger
|
||
|
|
// console.log('发布消息,发送文件内容-----')
|
||
|
|
if (res.data.result == '01') {
|
||
|
|
invokedFunction(595, '1B', { fileId: '99' })
|
||
|
|
.then(res => {
|
||
|
|
debugger
|
||
|
|
// console.log('发布消息,播放文件-----')
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$modal.msgError('发布失败,请重试')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$modal.msgError('发布失败,请重试')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$modal.msgError('发布失败,请重试')
|
||
|
|
})
|
||
|
|
loading.close()
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
this.$message({
|
||
|
|
type: 'info',
|
||
|
|
message: '已取消发布情报板'
|
||
|
|
})
|
||
|
|
loading.close()
|
||
|
|
})
|
||
|
|
this.onSubmit()
|
||
|
|
},
|
||
|
|
// 回读
|
||
|
|
onSubmit(deviceId) {
|
||
|
|
getDeviceRealtimeProperty(deviceId, '3A', { async: false })
|
||
|
|
.then(res => {
|
||
|
|
var contentsA = res.data['3A'].content
|
||
|
|
console.log('回读消息--1111111111---', contentsA)
|
||
|
|
|
||
|
|
this.dialogInfoList = contentsA.map(item => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
STAY: item.playbackDuration,
|
||
|
|
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,
|
||
|
|
STAY: item.playbackDuration / 10,
|
||
|
|
|
||
|
|
content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
console.log('hui1111111111111', this.dialogInfoList)
|
||
|
|
})
|
||
|
|
.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() {
|
||
|
|
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)
|
||
|
|
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)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 打开添加信息弹窗
|
||
|
|
addMoDataInfoFn(type, mode) {
|
||
|
|
this.$refs.addinfo.init('', type, mode)
|
||
|
|
},
|
||
|
|
// 修改弹窗
|
||
|
|
editOutline(item, index, type) {
|
||
|
|
this.showEmit = true
|
||
|
|
this.index = index
|
||
|
|
this.editType = type
|
||
|
|
console.log('修改弹窗', item)
|
||
|
|
this.boardEmitItem = {
|
||
|
|
...item,
|
||
|
|
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,
|
||
|
|
formatStyle: item.tcontents[0].formatStyle,
|
||
|
|
ACTION: item.inScreenMode, //出屏方式
|
||
|
|
STAY: item.stopTime, //停留时间
|
||
|
|
type: type,
|
||
|
|
screenSize: item.screenSize,
|
||
|
|
category: item.category,
|
||
|
|
id: item.id,
|
||
|
|
tcontentsId: item.tcontents[0].id
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 接收子组件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, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }] }
|
||
|
|
}
|
||
|
|
return item
|
||
|
|
})
|
||
|
|
console.log('修改后的数据', this.dialogInfoList)
|
||
|
|
// this.getTemplateHeaderFn()
|
||
|
|
this.$forceUpdate()
|
||
|
|
},
|
||
|
|
|
||
|
|
delMoFn(index) {
|
||
|
|
console.log(index)
|
||
|
|
// deleteTemplate(item.tcontents[0].templateId)
|
||
|
|
this.dialogInfoList.splice(index, 1)
|
||
|
|
// this.removeItemById(this.dialogInfoList, item.id)
|
||
|
|
},
|
||
|
|
putLeftFn(item) {
|
||
|
|
console.log('点击事件', item)
|
||
|
|
this.dialogInfoList.push({ ...item, STAY: item.stopTime })
|
||
|
|
console.log('点击事件9990089089', this.dialogInfoList)
|
||
|
|
},
|
||
|
|
tabClickFn(tab, event) {
|
||
|
|
console.log(tab, event)
|
||
|
|
},
|
||
|
|
closeDialogBtnFn() {
|
||
|
|
this.dialogInfoLeft = false
|
||
|
|
this.dialogInfoRight = false
|
||
|
|
},
|
||
|
|
showCeInfoFn() {
|
||
|
|
if (this.dialogInfoCamera) {
|
||
|
|
this.dialogInfoCamera = false
|
||
|
|
}
|
||
|
|
this.dialogInfoRight = !this.dialogInfoRight
|
||
|
|
},
|
||
|
|
showCameraInfoFn() {
|
||
|
|
if (this.dialogInfoRight) {
|
||
|
|
this.dialogInfoRight = false
|
||
|
|
}
|
||
|
|
this.dialogInfoCamera = !this.dialogInfoCamera
|
||
|
|
},
|
||
|
|
subjectBtnFn(item) {
|
||
|
|
this.subjectBtn = item.id
|
||
|
|
},
|
||
|
|
closeCameraBtnFn() {
|
||
|
|
this.dialogInfoCamera = false
|
||
|
|
},
|
||
|
|
dialogClose() {
|
||
|
|
this.showEmit = false
|
||
|
|
this.arrowRightVisible = false
|
||
|
|
},
|
||
|
|
removeItemById(arr, id) {
|
||
|
|
const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
|
||
|
|
if (index !== -1) {
|
||
|
|
arr.splice(index, 1) // 从数组中删除该项
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getScrollSz(w) {
|
||
|
|
if (w > 760) {
|
||
|
|
return 3
|
||
|
|
} else if (w > 470) {
|
||
|
|
return 2
|
||
|
|
} else {
|
||
|
|
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
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 转报文 字体
|
||
|
|
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'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.map_dialog {
|
||
|
|
width: 510px;
|
||
|
|
height: 550px;
|
||
|
|
background-color: pink;
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
top: 0px;
|
||
|
|
transform: translate(-110%, -110%);
|
||
|
|
}
|
||
|
|
.dialog_info {
|
||
|
|
width: 950px;
|
||
|
|
height: 600px;
|
||
|
|
position: absolute;
|
||
|
|
top: 12%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
.dialog_info_left {
|
||
|
|
width: 510px;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #114c66;
|
||
|
|
}
|
||
|
|
.dialog_info_right {
|
||
|
|
width: 430px;
|
||
|
|
height: 556px;
|
||
|
|
border: 2px solid #196980;
|
||
|
|
background-color: #114c66;
|
||
|
|
padding: 1vh 0.5vw;
|
||
|
|
overflow-y: scroll;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.dialog_head {
|
||
|
|
width: 100%;
|
||
|
|
height: 48px;
|
||
|
|
padding: 0 10px;
|
||
|
|
background-image: url('~@/assets/screen/xtb/qbbtit.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.tit {
|
||
|
|
color: #3de8ff;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
.btnCls {
|
||
|
|
width: 13px;
|
||
|
|
height: 13px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.deco {
|
||
|
|
width: 55%;
|
||
|
|
height: 5px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.dialogContent {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
padding: 10px 40px 10px 10px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.dialogContent_box {
|
||
|
|
width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
.dialogContent_l {
|
||
|
|
width: 355px;
|
||
|
|
// height: 4.91vh;
|
||
|
|
border: 2px solid #1d7890;
|
||
|
|
padding: 1px 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.dialogContent_r {
|
||
|
|
width: 96px;
|
||
|
|
// height: 4.91vh;
|
||
|
|
border: 2px solid #1d7890;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.dialogContent_l_xsq {
|
||
|
|
width: 256px;
|
||
|
|
height: 100%;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #ff0000;
|
||
|
|
background-color: #000;
|
||
|
|
line-height: 1;
|
||
|
|
// text-align: center;
|
||
|
|
display: flex;
|
||
|
|
// justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.show_r_btn {
|
||
|
|
width: 1.67vw;
|
||
|
|
height: 2.96vh;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.dialogContent_r_btn1 {
|
||
|
|
background-image: url('~@/assets/screen/xtb/gg.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
.dialogContent_r_btn2 {
|
||
|
|
background-image: url('~@/assets/screen/xtb/xx.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
.dialogContent_r_btn3 {
|
||
|
|
background-image: url('~@/assets/screen/xtb/zz.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
.dialogContent_box_item {
|
||
|
|
margin-bottom: 0.5vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.dialogContent_bottom {
|
||
|
|
width: 105%;
|
||
|
|
height: 16.52vh;
|
||
|
|
}
|
||
|
|
.show_bottom_tab_item {
|
||
|
|
width: 50%;
|
||
|
|
padding: 0.5vh 0;
|
||
|
|
display: flex;
|
||
|
|
// flex-wrap: wrap;
|
||
|
|
// align-items: center;
|
||
|
|
}
|
||
|
|
.show_bottom_tab_box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.show_bottom_tab_item_l {
|
||
|
|
color: #3de8ff;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.show_bottom_tab_item_r {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 0.5vw;
|
||
|
|
}
|
||
|
|
.dialogContent_ce {
|
||
|
|
position: absolute;
|
||
|
|
right: 0%;
|
||
|
|
top: 0%;
|
||
|
|
width: 24px;
|
||
|
|
height: 95px;
|
||
|
|
padding: 0.5vh 0;
|
||
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
|
||
|
|
border-radius: 0px 0px 0px 0px;
|
||
|
|
opacity: 1;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.show_ce_img {
|
||
|
|
width: 15px;
|
||
|
|
height: 10px;
|
||
|
|
transition: transform 0.3s ease; /* 过渡效果 */
|
||
|
|
}
|
||
|
|
.show_ce_txt {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.dialogContent_box_empty {
|
||
|
|
font-size: 14px;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.dialog_info_right_tit {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-bottom: 0.5vh;
|
||
|
|
}
|
||
|
|
.dialog_info_right_show {
|
||
|
|
width: 100%;
|
||
|
|
// height: 28vh;
|
||
|
|
}
|
||
|
|
.dialogContent_bottom_btn {
|
||
|
|
width: 100%;
|
||
|
|
height: 5vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.show_bottom_btn_add {
|
||
|
|
width: 90px;
|
||
|
|
height: 23px;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 23px;
|
||
|
|
background: #00b3cc;
|
||
|
|
border-radius: 48px 48px 48px 48px;
|
||
|
|
opacity: 1;
|
||
|
|
margin-right: 0.5vw;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.show_bottom_btn_del {
|
||
|
|
width: 90px;
|
||
|
|
height: 23px;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 23px;
|
||
|
|
background: #c87800;
|
||
|
|
border-radius: 48px 48px 48px 48px;
|
||
|
|
opacity: 1;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.info_right_camera {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 4vh);
|
||
|
|
padding: 1vh 0.5vw;
|
||
|
|
}
|
||
|
|
.info_right_camera_top {
|
||
|
|
width: 100%;
|
||
|
|
height: 20vh;
|
||
|
|
}
|
||
|
|
.info_right_camera_bom {
|
||
|
|
width: 100%;
|
||
|
|
padding: 1vh 0;
|
||
|
|
height: calc(100% - 20vh);
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.camera_bom_left {
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 2vh 0;
|
||
|
|
border-right: 1px dashed #285a71;
|
||
|
|
}
|
||
|
|
.camera_bom_right {
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.camera_bom_left_item {
|
||
|
|
width: 100%;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
padding-bottom: 1.5vh;
|
||
|
|
}
|
||
|
|
.camera_bom_left_item_txt {
|
||
|
|
width: 31%;
|
||
|
|
color: #3de8ff;
|
||
|
|
}
|
||
|
|
.camera_bom_left_item_val {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.camera_bom_right_t {
|
||
|
|
width: 100%;
|
||
|
|
height: 60%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.camera_bom_right_b {
|
||
|
|
width: 100%;
|
||
|
|
height: 40%;
|
||
|
|
// background-color: deeppink;
|
||
|
|
}
|
||
|
|
.camera_bom_right_t_box {
|
||
|
|
width: 2vw;
|
||
|
|
height: 4vh;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
background-color: #005f87;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid #2191b1;
|
||
|
|
}
|
||
|
|
.camera_bom_right_t_h_po {
|
||
|
|
width: 1vw;
|
||
|
|
height: 5vh;
|
||
|
|
position: absolute;
|
||
|
|
left: 27%;
|
||
|
|
top: 33%;
|
||
|
|
cursor: pointer;
|
||
|
|
background-image: url('~@/assets/screen/xtb/xjleft.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
.camera_bom_right_b_btn {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0vh 2vw 1vh 2vw;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.camera_bom_right_b_btn_l {
|
||
|
|
width: 1.2vw;
|
||
|
|
height: 2.4vh;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-image: url('~@/assets/screen/xtb/jhbtn.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.camera_bom_right_b_btn_c {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.camera_bom_right_b_btn_r {
|
||
|
|
width: 1.2vw;
|
||
|
|
height: 2.4vh;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-image: url('~@/assets/screen/xtb/addbtn.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
// background-color: #104b65;
|
||
|
|
// background-image: url('~@/assets/screen/xtb/qbbtit.png');
|
||
|
|
// background-size: 100% 100%;
|
||
|
|
// background-repeat: no-repeat;
|
||
|
|
// background-position: center;
|
||
|
|
|
||
|
|
/* 通用滚动条样式 */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 3px; /* 设置滚动条宽度 */
|
||
|
|
height: 3px; /* 设置滚动条高度 */
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background-color: #114c66; /* 设置滚动条轨道颜色 */
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background-color: #9abce0; /* 设置滚动条滑块颜色 */
|
||
|
|
border-radius: 4px; /* 设置滚动条滑块圆角 */
|
||
|
|
}
|
||
|
|
::v-deep .el-tabs__nav-wrap::after {
|
||
|
|
background-color: #316076;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs__item.is-active {
|
||
|
|
color: #3de8ff !important;
|
||
|
|
}
|
||
|
|
::v-deep .el-tabs__item {
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
::v-deep .el-tabs__active-bar {
|
||
|
|
background-color: #3de8ff !important;
|
||
|
|
}
|
||
|
|
::v-deep .el-collapse-item__header {
|
||
|
|
color: #fff;
|
||
|
|
height: 28px;
|
||
|
|
background-color: #053b4f;
|
||
|
|
border: none;
|
||
|
|
padding-left: 0.5vw;
|
||
|
|
}
|
||
|
|
::v-deep .el-collapse {
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
::v-deep .el-collapse-item__wrap {
|
||
|
|
color: #fff;
|
||
|
|
will-change: height;
|
||
|
|
background-color: #053b4f;
|
||
|
|
overflow: hidden;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-top: 0.5vh;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
::v-deep .el-collapse-item__content {
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding: 0.5vh 0.5vw;
|
||
|
|
}
|
||
|
|
::v-deep .el-collapse-item {
|
||
|
|
margin-bottom: 1vh;
|
||
|
|
}
|
||
|
|
::v-deep .el-input--mini .el-input__icon {
|
||
|
|
line-height: 20px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
::v-deep .el-input--mini .el-input__inner {
|
||
|
|
height: 20px;
|
||
|
|
line-height: 20px;
|
||
|
|
background-color: #086d8f;
|
||
|
|
border: none;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|