Joe
1 year ago
34 changed files with 856 additions and 2503 deletions
@ -0,0 +1,12 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 查询附近相机
|
||||
|
export function getNearbyCameraByPileNum(pileNum) { |
||||
|
return request({ |
||||
|
url: '/video/nearCamListPileNum', |
||||
|
method: 'get', |
||||
|
params: { |
||||
|
pileNum |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
After Width: | Height: | Size: 898 B |
|
Before Width: | Height: | Size: 654 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 720 B |
|
After Width: | Height: | Size: 601 B |
|
Before Width: | Height: | Size: 859 B |
|
Before Width: | Height: | Size: 754 B |
|
Before Width: | Height: | Size: 766 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 939 B |
@ -0,0 +1,235 @@ |
|||||
|
<template> |
||||
|
<div class="compBox"> |
||||
|
<div ref="DialogContentRef" class="compCtt"> |
||||
|
<div class="compCttBg"></div> |
||||
|
<div class="compCttCon"> |
||||
|
<div class="compHead"><img src="@/assets/jihe/images/button/btnClose.svg" @click="onClose"></div> |
||||
|
<div class='compCon'> |
||||
|
<div class="direction"> |
||||
|
<div class="control-container top accessEvent" @click="controlClick(21)"> |
||||
|
<div class="icon-horizontal" /> |
||||
|
<img src="./images/top.svg"> |
||||
|
</div> |
||||
|
<div class="control-container right accessEvent" @click="controlClick(24)"> |
||||
|
<div class="icon-vertical" /> |
||||
|
<img src="./images/right.svg"> |
||||
|
</div> |
||||
|
<div class="center"></div> |
||||
|
<div class="control-container bottom accessEvent" @click="controlClick(22)"> |
||||
|
<div class="icon-horizontal" style="transform: rotate(180deg);" /> |
||||
|
<img src="./images/bottom.svg"> |
||||
|
</div> |
||||
|
<div class="control-container left accessEvent" @click="controlClick(23)"> |
||||
|
<div class="icon-vertical" style="transform: rotate(180deg);" /> |
||||
|
<img src="./images/left.svg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="options"> |
||||
|
<div v-for="item in options" :key="item.key"> |
||||
|
<img src="./images/sub.svg" class="accessEvent" @click="controlClick(item.sub)"> |
||||
|
<span>{{ item.label }}</span> |
||||
|
<img src="./images/add.svg" class="accessEvent" @click="controlClick(item.add)"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
||||
|
import { throttle } from "lodash" |
||||
|
import { moveable } from "@screen/utils/moveable" |
||||
|
export default { |
||||
|
name: 'CameraController', |
||||
|
components: { |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
deviceId: String |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
options: [ |
||||
|
{ |
||||
|
label: "变倍", |
||||
|
key: "zoom", |
||||
|
add: "12", |
||||
|
sub: "11" |
||||
|
}, |
||||
|
{ |
||||
|
label: "光圈", |
||||
|
key: "aperture", |
||||
|
add: "15", |
||||
|
sub: "16" |
||||
|
}, |
||||
|
{ |
||||
|
label: "聚焦", |
||||
|
key: "focus", |
||||
|
add: "13", |
||||
|
sub: "14" |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
}, |
||||
|
watch:{ |
||||
|
visible:{ |
||||
|
deep: true, |
||||
|
immediate:true, |
||||
|
handler(bool){ |
||||
|
this.$nextTick(() => { |
||||
|
if (!bool) return this.destroyMoveable?.() |
||||
|
|
||||
|
const container = this.$refs.DialogContentRef; |
||||
|
console.log(container); |
||||
|
|
||||
|
this.destroyMoveable = moveable(container, { target: container.querySelector(".compCttBg") }); |
||||
|
|
||||
|
this.$once("hook:beforeDestroy", () => this.destroyMoveable?.()); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
controlClick: throttle(function (type) { |
||||
|
controlCamera(this.deviceId, type) |
||||
|
}, 150), |
||||
|
onClose(){ |
||||
|
this.$emit("update:visible" , false); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.accessEvent{ pointer-events: all;} |
||||
|
.compBox{ |
||||
|
.compCtt{ |
||||
|
|
||||
|
.compCttBg{ width: 340px; height: 200px; background-color: #29647D;} |
||||
|
.compCttCon{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px 15px 30px; |
||||
|
pointer-events: none; |
||||
|
.compHead{ |
||||
|
display: flex; justify-content: flex-end; padding-bottom: 20px; |
||||
|
img{ width: 20px; height: 20px; pointer-events: all;} |
||||
|
} |
||||
|
.compCon { |
||||
|
display: flex; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
gap: 36px; |
||||
|
|
||||
|
img { |
||||
|
cursor: pointer; pointer-events: all; |
||||
|
} |
||||
|
|
||||
|
.control-container { |
||||
|
position: relative; |
||||
|
width: min-content; |
||||
|
|
||||
|
&:active { |
||||
|
[class^="icon"] { |
||||
|
background-color: #48B0CB; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon-horizontal, |
||||
|
.icon-vertical { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
background-color: #006A96; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
|
||||
|
.icon-horizontal { |
||||
|
clip-path: path('M53.807 19.0734C51.1049 21.3657 47.1722 21.2685 44.0948 19.512C35.7042 14.7227 25.2544 13.7636 15.6704 17.82C14.5092 18.3114 13.3921 18.8632 12.321 19.4703C9.23352 21.2201 5.29428 21.3087 2.59447 19.0054V19.0054C-0.433686 16.4219 -0.827317 11.8122 2.24787 9.28482C4.93936 7.07281 7.91063 5.2081 11.093 3.74265C16.4653 1.26882 22.3109 -0.00817108 28.2253 6.86646e-05C34.1398 0.0083065 39.9818 1.30157 45.3471 3.79036C48.527 5.26539 51.4944 7.13947 54.1807 9.36039C57.2464 11.8949 56.8402 16.5002 53.807 19.0734V19.0734Z'); |
||||
|
width: 57px; |
||||
|
height: 21px; |
||||
|
} |
||||
|
|
||||
|
.icon-vertical { |
||||
|
clip-path: path('M2.33992 53.8068C0.0475853 51.1047 0.14481 47.172 1.90137 44.0945C6.69064 35.7039 7.64974 25.2542 3.59338 15.6702C3.10192 14.509 2.55008 13.3918 1.94307 12.3208C0.193261 9.23327 0.1046 5.29403 2.40796 2.59423V2.59423C4.99146 -0.433928 9.60116 -0.827561 12.1285 2.24762C14.3405 4.93912 16.2052 7.91038 17.6707 11.0928C20.1445 16.465 21.4215 22.3106 21.4133 28.2251C21.405 34.1395 20.1117 39.9816 17.623 45.3469C16.1479 48.5267 14.2738 51.4941 12.0529 54.1805C9.51843 57.2461 4.91315 56.84 2.33992 53.8068V53.8068Z'); |
||||
|
width: 21px; |
||||
|
height: 57px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.direction { |
||||
|
display: grid; |
||||
|
grid-template-columns: 0.3fr 1fr 0.3fr; |
||||
|
grid-template-rows: 0.3fr 1fr 0.3fr; |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
|
||||
|
gap: 3px; |
||||
|
|
||||
|
|
||||
|
.top { |
||||
|
grid-area: 1/2/1/2; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
grid-area: 2/3/2/3; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
grid-area: 3/2/3/2; |
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
grid-area: 2/1/2/1; |
||||
|
} |
||||
|
|
||||
|
.center { |
||||
|
grid-area: 2/2/2/2; |
||||
|
|
||||
|
width: 66px; |
||||
|
height: 66px; |
||||
|
background: #006A96; |
||||
|
border-radius: 50%; |
||||
|
opacity: 1; |
||||
|
border: 1px solid #3DE8FF |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.options { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
gap: 18px; |
||||
|
|
||||
|
>div { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 9px; |
||||
|
|
||||
|
img { |
||||
|
background-color: #006A96; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
&:active { |
||||
|
background-color: #48B0CB; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 643 B |
|
After Width: | Height: | Size: 3.2 KiB |
@ -0,0 +1,213 @@ |
|||||
|
<template> |
||||
|
<div v-if="visible" class="compBox"> |
||||
|
<div class="head" style="height:4vh;"> |
||||
|
<div class="tit">附近相机</div> |
||||
|
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="onClose"> |
||||
|
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt=""> |
||||
|
</div> |
||||
|
<template v-if="list.length>0"> |
||||
|
<!-- <p>{{ list }}</p> --> |
||||
|
<div class="videoPlayer"> |
||||
|
<!-- <videoView :url="slectedVideo" /> --> |
||||
|
<Video class="video-stream" :camId="selectedCamera.camId" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="operation"> |
||||
|
<div class="selectCam"> |
||||
|
<div class="label">选择相机: </div> |
||||
|
<div class="val"> |
||||
|
<el-select v-model="selectedCameraIndex" placeholder="请选择" size="mini" @change="onChangeCamera"> |
||||
|
<el-option v-for="item,index in list" :key="index" :label="item.camName" :value="index"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-button type="primary" icon="el-icon-s-operation" class="controlCam" v-if="selectedCamera.ptzCtrl == 0" @click="controlDialogVisible=!controlDialogVisible"></el-button> |
||||
|
<CameraController :visible.sync="controlDialogVisible" v-if="controlDialogVisible" :deviceId="selectedCamera.camId" class="cameraControl"/> |
||||
|
|
||||
|
</div> |
||||
|
<div class="flex1 txtInfo"> |
||||
|
<p v-for="item in cameraInfo" :key="item.value" class="txtItem"> |
||||
|
<span class="label">{{ item.title }}: </span> |
||||
|
<span class="val">{{ item.value }}</span> |
||||
|
</p> |
||||
|
</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="onControlCamera(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> --> |
||||
|
|
||||
|
</template> |
||||
|
<Empty v-else text="没有查询到附近的相机..." class="flex1"> |
||||
|
</Empty> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import Video from "@screen/components/Video" |
||||
|
import CameraController from "./CameraController.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: '', |
||||
|
components: { |
||||
|
Video, |
||||
|
CameraController |
||||
|
}, |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
visible:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
booooooool:true, |
||||
|
selectedCameraIndex:null, |
||||
|
selectedCamera:{}, |
||||
|
cameraInfo:[], |
||||
|
controlDialogVisible:false |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
list:{ |
||||
|
handler(){ |
||||
|
this.selectCamera(); |
||||
|
}, |
||||
|
deep:true, |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
}, |
||||
|
methods:{ |
||||
|
onClose (){ |
||||
|
this.$emit("update:visible" , false) |
||||
|
}, |
||||
|
onChangeCamera(val){ |
||||
|
this.selectCamera(); |
||||
|
}, |
||||
|
selectCamera(){ |
||||
|
if(this.list.length <= 0){ |
||||
|
return |
||||
|
} |
||||
|
if(this.selectedCameraIndex == null){ |
||||
|
this.selectedCameraIndex = 0; |
||||
|
} |
||||
|
this.selectedCamera = this.list[this.selectedCameraIndex]; |
||||
|
let cmr = this.selectedCamera; |
||||
|
this.cameraInfo = [ |
||||
|
{title:"道路名称", value:cmr.deptName }, |
||||
|
{title:"道路编号", value:cmr.road }, |
||||
|
{title:"设备名称", value:cmr.camName }, |
||||
|
{title:"设备编号", value:cmr.camId }, |
||||
|
{title:"设备桩号", value:cmr.pileNum }, |
||||
|
{title:"相机类型", value:["球机","枪机"][+cmr.ptzCtrl] }, |
||||
|
// {title:"相机状态", value:cmr.camStatus } |
||||
|
]; |
||||
|
}, |
||||
|
onControlCamera(val){ |
||||
|
console.log(val , "vallllllllll") |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
@mixin fontClass{ |
||||
|
fontSize:14px; color:#FFF; |
||||
|
} |
||||
|
$colorLabel: #3DE8FF; |
||||
|
.compBox{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
position: relative; |
||||
|
.cameraControl{ |
||||
|
position: absolute; |
||||
|
right: -2px; |
||||
|
top:-2px; |
||||
|
transform: translateX(100%); |
||||
|
} |
||||
|
.head { |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
.flex1{ |
||||
|
flex: 1; height:0; |
||||
|
} |
||||
|
.videoPlayer { height: 246px; } |
||||
|
.operation{ |
||||
|
display: flex; flex-direction: row; height: 36px; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom:1px solid #3DE8FF; position: relative; |
||||
|
.selectCam{ display: flex; flex-direction: row; |
||||
|
.label{ |
||||
|
margin-right: 6px; |
||||
|
@include fontClass; |
||||
|
color: $colorLabel; |
||||
|
} |
||||
|
.val{ width: 220px; } |
||||
|
} |
||||
|
.controlCam{ |
||||
|
padding: 3px; |
||||
|
font-size: 20px; |
||||
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
||||
|
border: none; |
||||
|
box-shadow: 0 0 4px rgba(0,0,0,0.3); |
||||
|
} |
||||
|
} |
||||
|
.txtInfo{ |
||||
|
flex: 1; overflow-y: scroll; padding: 20px 20px 10px; display: flex; flex-wrap: wrap; align-content:flex-start; |
||||
|
.txtItem{ |
||||
|
width: 0; flex-basis: 50%; height: 34px; |
||||
|
.label{ |
||||
|
@include fontClass; |
||||
|
color: $colorLabel; |
||||
|
} |
||||
|
.val{ |
||||
|
@include fontClass; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<div class='empty'> |
||||
|
<p> |
||||
|
{{ text }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: 'InDevelopment', |
||||
|
components: { |
||||
|
}, |
||||
|
props:{ |
||||
|
text:{ |
||||
|
type:String, |
||||
|
default:"暂无数据" |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log(this.$route) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.empty { |
||||
|
padding-top:160px; |
||||
|
color: #8A9EAA; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
p { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,955 +0,0 @@ |
|||||
<template> |
|
||||
<div class="container infoBoardDialog"> |
|
||||
<!-- 添加信息弹窗 --> |
|
||||
<el-dialog title="新增" :visible.sync="dialogVisible" width="50%" :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', |
|
||||
lineHeight:boardHeight + 'px', |
|
||||
justifyContent: getTextAlign(dataForm.formatStyle) |
|
||||
}" class="blackBoard2"> |
|
||||
<span :style="{ |
|
||||
color: getColorStyle(dataForm.COLOR), |
|
||||
fontSize: dataForm.FONT_SIZE, |
|
||||
fontFamily: dataForm.FONT, |
|
||||
zIndex: '1000', |
|
||||
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, |
|
||||
' ' |
|
||||
) |
|
||||
: '' |
|
||||
"></span> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
<el-card> |
|
||||
<el-form :model="dataForm" :rules="dataRule" label-width="120px" 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="formatStyle" @input="alignment(formatStyle)"> |
|
||||
<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-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="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-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="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.dictLabel" :label="item.dictLabel" :value="item.dictLabel"> |
|
||||
</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.cssClass" :label="item.dictLabel" :value="item.cssClass"> |
|
||||
</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-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: 1, |
|
||||
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: 'yellow', |
|
||||
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, |
|
||||
formatStyle: '2' |
|
||||
} |
|
||||
}, |
|
||||
// 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: 'FF0000', |
|
||||
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[3].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' |
|
||||
} |
|
||||
] |
|
||||
|
|
||||
// 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('情报板所属类别不能为空') |
|
||||
} |
|
||||
this.$emit('addInfo', this.dataForm) |
|
||||
this.dialogVisible = false |
|
||||
//走接口检验内容是否包含敏感字段 |
|
||||
/*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) * 100 |
|
||||
this.$emit('addInfo', this.dataForm) |
|
||||
} else { |
|
||||
// 走接口 存到信息模板里 |
|
||||
const params1 = { |
|
||||
applyType: '', |
|
||||
category: this.dataForm.category, |
|
||||
coordinate: '', |
|
||||
height: '', |
|
||||
id: '', |
|
||||
imageUrl: '', |
|
||||
imgSizeFrom: '', |
|
||||
inScreenMode: this.dataForm.ACTION, |
|
||||
remark: '', |
|
||||
screenSize: this.dataForm.screenSize, |
|
||||
stopTime: Number(this.dataForm.STAY) * 100, |
|
||||
vmsType: '', |
|
||||
width: '' |
|
||||
} |
|
||||
const templateContent = [] |
|
||||
templateContent.push({ |
|
||||
content: this.dataForm.CONTENT, |
|
||||
coordinate: this.dataForm.COORDINATE, |
|
||||
fontColor: this.getColorStyle(this.dataForm.COLOR), |
|
||||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|
||||
fontSpacing: this.dataForm.SPEED, |
|
||||
fontType: this.getFontStyle(this.dataForm.FONT) |
|
||||
}) |
|
||||
// this.$emit("addInfoMode", this.dataForm); |
|
||||
addTemplate(params1, method).then(data => { |
|
||||
console.log(data, '新增口') |
|
||||
let params2 = { |
|
||||
templateContent: templateContent, |
|
||||
templateId: data |
|
||||
} |
|
||||
addTemplateContent(params2) |
|
||||
.then(res => { |
|
||||
if (res.code == 200) { |
|
||||
this.$emit('getActiveNames') |
|
||||
this.$message.success('添加成功') |
|
||||
} |
|
||||
}) |
|
||||
.catch(err => { |
|
||||
throw err |
|
||||
}) |
|
||||
}) |
|
||||
} |
|
||||
} else { |
|
||||
// // 修改 |
|
||||
// editTemplate(this.dataForm).then((data) => {}); |
|
||||
// this.templateContent.forEach((e) => { |
|
||||
// e.img = e.imageName; |
|
||||
// }); |
|
||||
// var params = { |
|
||||
// templateContent: this.templateContent, |
|
||||
// templateId: this.dataForm.id, |
|
||||
// templateDelContent: this.templateDelContent, |
|
||||
// }; |
|
||||
// editTemplateContent(params).then((response) => { |
|
||||
// // console.log(response, "返回结果"); |
|
||||
// }); |
|
||||
} |
|
||||
this.loading = false |
|
||||
this.dialogVisible = false |
|
||||
this.isAdd = false |
|
||||
this.$emit('refreshDataList', this.dataForm) |
|
||||
var textBoard2 = document.getElementsByClassName('textBoard2') |
|
||||
textBoard2[0].style.position = 'absolute' |
|
||||
} |
|
||||
})*/ |
|
||||
|
|
||||
// this.loading = true |
|
||||
// // let templateId = ""; |
|
||||
// let method = 'put' |
|
||||
// if (this.isAdd) { |
|
||||
// if (this.infoType == 1) { |
|
||||
// // 不走接口 存到待下发信息里 |
|
||||
// this.dataForm.STAY = Number(this.dataForm.STAY) * 100 |
|
||||
// this.$emit('addInfo', this.dataForm) |
|
||||
// } else { |
|
||||
// // 走接口 存到信息模板里 |
|
||||
// const params1 = { |
|
||||
// applyType: '', |
|
||||
// category: this.dataForm.category, |
|
||||
// coordinate: '', |
|
||||
// height: '', |
|
||||
// id: '', |
|
||||
// imageUrl: '', |
|
||||
// imgSizeFrom: '', |
|
||||
// inScreenMode: this.dataForm.ACTION, |
|
||||
// remark: '', |
|
||||
// screenSize: this.dataForm.screenSize, |
|
||||
// stopTime: Number(this.dataForm.STAY) * 100, |
|
||||
// vmsType: '', |
|
||||
// width: '' |
|
||||
// } |
|
||||
// const templateContent = [] |
|
||||
// templateContent.push({ |
|
||||
// content: this.dataForm.CONTENT, |
|
||||
// coordinate: this.dataForm.COORDINATE, |
|
||||
// fontColor: this.getColorStyle(this.dataForm.COLOR), |
|
||||
// fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|
||||
// fontSpacing: this.dataForm.SPEED, |
|
||||
// fontType: this.getFontStyle(this.dataForm.FONT), |
|
||||
// formatStyle: this.dataForm.formatStyle |
|
||||
// }) |
|
||||
// // this.$emit("addInfoMode", this.dataForm); |
|
||||
// addTemplate(params1, method).then(data => { |
|
||||
// console.log(data, '新增口') |
|
||||
// let params2 = { |
|
||||
// templateContent: templateContent, |
|
||||
// templateId: data |
|
||||
// } |
|
||||
// addTemplateContent(params2) |
|
||||
// .then(res => { |
|
||||
// if (res.code == 200) { |
|
||||
// this.$emit('getActiveNames') |
|
||||
// this.$message.success('添加成功') |
|
||||
// } |
|
||||
// }) |
|
||||
// .catch(err => { |
|
||||
// throw err |
|
||||
// }) |
|
||||
// }) |
|
||||
// } |
|
||||
// } else { |
|
||||
// // // 修改 |
|
||||
// // editTemplate(this.dataForm).then((data) => {}); |
|
||||
// // this.templateContent.forEach((e) => { |
|
||||
// // e.img = e.imageName; |
|
||||
// // }); |
|
||||
// // var params = { |
|
||||
// // templateContent: this.templateContent, |
|
||||
// // templateId: this.dataForm.id, |
|
||||
// // templateDelContent: this.templateDelContent, |
|
||||
// // }; |
|
||||
// // editTemplateContent(params).then((response) => { |
|
||||
// // // console.log(response, "返回结果"); |
|
||||
// // }); |
|
||||
// } |
|
||||
// this.loading = false |
|
||||
// this.dialogVisible = false |
|
||||
// this.isAdd = false |
|
||||
// this.$emit('refreshDataList', this.dataForm) |
|
||||
// var textBoard2 = document.getElementsByClassName('textBoard2') |
|
||||
// textBoard2[0].style.position = 'absolute' |
|
||||
}, |
|
||||
/*********************************************业务代码***********************************************/ |
|
||||
getFontStyle(font) { |
|
||||
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 |
|
||||
} |
|
||||
}, |
|
||||
// 文字对齐方式 |
|
||||
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 |
|
||||
// console.log(this.dataForm.COORDINATE, "this.dataForm.COORDINATE"); |
|
||||
if (alignmentNum != undefined) { |
|
||||
this.dataForm.formatStyle = alignmentNum |
|
||||
} |
|
||||
}, |
|
||||
addZero(num) { |
|
||||
return ('000' + num).slice(-3) |
|
||||
}, |
|
||||
/*增加新的内容*/ |
|
||||
|
|
||||
getTextAlign(font) { |
|
||||
if (font == '0') { |
|
||||
return 'left' |
|
||||
} else if (font == '1') { |
|
||||
return 'right' |
|
||||
} else { |
|
||||
return 'center' |
|
||||
} |
|
||||
}, |
|
||||
/*删除内容*/ |
|
||||
// delTemplateContent(data) { |
|
||||
// for (let i = 0; i < this.templateContent.length; i++) { |
|
||||
// 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> |
|
||||
@ -1,917 +0,0 @@ |
|||||
<template> |
|
||||
<div class="container infoBoardDialog"> |
|
||||
<!-- 添加信息弹窗 --> |
|
||||
<el-dialog title="修改" :visible.sync="dialogVisible" width="50%" :before-close="closeDialog" :close-on-click-modal="false"> |
|
||||
<div class="dialogStyleBox"> |
|
||||
<div class="dialogLine"></div> |
|
||||
<div class="dialogCloseButton"></div> |
|
||||
</div> |
|
||||
<el-card class="box-card"> |
|
||||
<div class="blackBoard1" v-on:ondragenter="ondragenter" v-on:drop="faceDrop" v-on:dragover="allowDrop" :style="{ |
|
||||
width: getDevicePixel(boardWidth, 0), |
|
||||
height: getDevicePixel(boardHeight, 1), |
|
||||
position: 'relative', |
|
||||
lineHeight:boardHeight + 'px', |
|
||||
textAlign: getTextAlign(dataForm.formatStyle), |
|
||||
justifyContent: getTextAlign(dataForm.formatStyle) |
|
||||
}"> |
|
||||
<span class="textBoard1 boardTextStyle" :style="{ |
|
||||
color: getColorStyle(dataForm.COLOR), |
|
||||
fontSize: getFontSize(dataForm.FONT_SIZE), |
|
||||
fontFamily: dataForm.FONT, |
|
||||
zIndex: '1000', |
|
||||
|
|
||||
maxHeight:getDevicePixel(boardHeight, 1), |
|
||||
}" v-html=" |
|
||||
dataForm.CONTENT.replace(/\n|\r\n/g, '<br>').replace( |
|
||||
/ /g, |
|
||||
' ' |
|
||||
) |
|
||||
"></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" v-show="this.boardEmitItem.type == 2 || this.dataForm.category"> |
|
||||
<el-form-item prop="category" label="所属类别"> |
|
||||
<el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini" disabled> |
|
||||
<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 :span="16" class="infoBoardButton"> |
|
||||
<el-radio-group v-model="formatStyle" @input="alignment(formatStyle)"> |
|
||||
<el-radio-button :label="0">左对齐</el-radio-button> |
|
||||
<el-radio-button :label="2">左右居中</el-radio-button> |
|
||||
<el-radio-button :label="1">右对齐</el-radio-button> |
|
||||
</el-radio-group> |
|
||||
<!-- <el-button type="info" plain @click="alignment(6)" size="mini">下对齐</el-button> |
|
||||
<el-button type="info" plain @click="alignment(5)" size="mini">上下居中</el-button> |
|
||||
<el-button type="info" plain @click="alignment(4)" size="mini">上对齐</el-button> --> |
|
||||
<!-- <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-button type="primary" plain @click="addCurrRow">添加</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="screenSize" label="屏幕尺寸"> |
|
||||
<el-input disabled v-model="dataForm.screenSize"></el-input> |
|
||||
|
|
||||
</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="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.dictLabel" :label="item.dictLabel" :value="item.dictLabel"> |
|
||||
</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.dictValue" :label="item.dictLabel" :value="item.dictValue"> |
|
||||
</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-row> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
|
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="dataFormSubmitHandle()" v-loading="loading" class="submitButton" style="background-color: #10aac2;color:#fff;">确认 |
|
||||
</el-button> |
|
||||
<el-button @click="closeDialog()" class="closeButton" style="background-color:#b5b5b6;color:#fff;">取消</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { |
|
||||
// getTemplateInfo, |
|
||||
// addTemplate, |
|
||||
// addTemplateContent, |
|
||||
// editTemplateContent, |
|
||||
// editTemplate, |
|
||||
// deleteTemplate, |
|
||||
// getTemplateContent, |
|
||||
editTemplate, |
|
||||
editTemplateContent, |
|
||||
getGalleryList, |
|
||||
uploadBoardEditInfo, |
|
||||
getFontSizeByDevicePixel |
|
||||
} from '@/api/board/template' |
|
||||
import { checkIotBoardContent } from '@/api/board/vocabulary' |
|
||||
import { HashMap } from '@/api/board/informationBoard' |
|
||||
// 对象深拷贝 |
|
||||
export const deepClone = data => { |
|
||||
// 封装的判断数据类型的方法 |
|
||||
var type = typeof data |
|
||||
var obj |
|
||||
if (type === 'array') { |
|
||||
obj = [] |
|
||||
} else if (type === 'object') { |
|
||||
obj = {} |
|
||||
} else { |
|
||||
// 不再具有下一层次 |
|
||||
return data |
|
||||
} |
|
||||
if (type === 'array') { |
|
||||
for (var i = 0, len = data.length; i < len; i++) { |
|
||||
obj.push(deepClone(data[i])) |
|
||||
} |
|
||||
} else if (type === 'object') { |
|
||||
for (var key in data) { |
|
||||
obj[key] = deepClone(data[key]) |
|
||||
} |
|
||||
} |
|
||||
return obj |
|
||||
} |
|
||||
export default { |
|
||||
props: { |
|
||||
boardEmitItem: { |
|
||||
required: true, |
|
||||
type: Object |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
data() { |
|
||||
return { |
|
||||
formatStyle: 2, |
|
||||
alignmentNum: 2, |
|
||||
iotTemplateCategoryList: [], |
|
||||
content: '', |
|
||||
|
|
||||
boardWidth: '', |
|
||||
boardHeight: '', |
|
||||
// boardEmitItem:this.boardEmitItem, |
|
||||
disabled: true, |
|
||||
checkList: [], //复选框一组 |
|
||||
obj: '', |
|
||||
imgUrl: [], |
|
||||
imgUrlOther: [], |
|
||||
dialogVisible: true, |
|
||||
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: 'yellow', |
|
||||
fontSize: '24', |
|
||||
fontType: 'KaiTi', |
|
||||
fontSpacing: 0, |
|
||||
coordinate: '000000', |
|
||||
url: '', |
|
||||
previewContent: '', //预览内容 |
|
||||
ispreviewContent: -1, |
|
||||
dataForm: { |
|
||||
CONTENT: '', |
|
||||
STAY: '', |
|
||||
FONT: '', |
|
||||
COORDINATE: '' |
|
||||
|
|
||||
// id: "", |
|
||||
// screenSize: "400*40", //屏幕尺寸 |
|
||||
// inScreenMode: "1", //入屏方式 |
|
||||
// rollSpeed: "1000", |
|
||||
// stopTime: "500", |
|
||||
// applyType: "", //适用类型 |
|
||||
// vmsType: "", //情报板类型 |
|
||||
// remark: "", //备注 |
|
||||
// imgSizeFrom: "", //尺寸大小 |
|
||||
// imageUrl: "", |
|
||||
// height: "", |
|
||||
// width: "", |
|
||||
// coordinate: "", //起始点位置;前3位代表x点的位值，后3位代表y点的位置 |
|
||||
}, |
|
||||
templateContentModel: '', |
|
||||
templateContent: [], |
|
||||
templateDelContent: [], |
|
||||
fontTypeOptions: [], |
|
||||
screenSizeOptions: [ |
|
||||
{ |
|
||||
type: '400*40' |
|
||||
}, |
|
||||
{ |
|
||||
type: '128*64' |
|
||||
} |
|
||||
], |
|
||||
colorOptions: [], |
|
||||
isCurrencyOptions: [ |
|
||||
{ |
|
||||
code: '0', |
|
||||
content: '通用' |
|
||||
}, |
|
||||
{ |
|
||||
code: '1', |
|
||||
content: '仅为智能推荐模板' |
|
||||
} |
|
||||
], |
|
||||
inScreenModeOptions: [], |
|
||||
imgSize: [ |
|
||||
{ |
|
||||
type: '1024*128', |
|
||||
name: '全屏' |
|
||||
}, |
|
||||
{ |
|
||||
type: '', |
|
||||
name: '正常' |
|
||||
} |
|
||||
], |
|
||||
fontSizeOpt: [], |
|
||||
title: '选择图片', |
|
||||
loading: false, |
|
||||
isAdd: 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: { |
|
||||
dataRule() { |
|
||||
return { |
|
||||
itemPropertyMap: null, |
|
||||
CONTENT: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请输入详细内容', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
], |
|
||||
fontColor: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请填写字体颜色', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
], |
|
||||
fontSize: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请填写字体大小', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
], |
|
||||
fontType: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择字体类型', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
], |
|
||||
fontSpacing: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择字体间距', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
], |
|
||||
rollSpeed: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请填写滚动速度', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
], |
|
||||
stopTime: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请填写停留时间', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
], |
|
||||
inScreenMode: [ |
|
||||
{ |
|
||||
required: true, |
|
||||
message: '请选择入屏方式', |
|
||||
trigger: 'blur' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
divStyle: function () { |
|
||||
return { |
|
||||
width: this.width + 'px', |
|
||||
height: this.height + 'px' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
// boardEmitItem(newval){ |
|
||||
// console.log(newval,"newval") |
|
||||
// this.boardEmitItem = newval |
|
||||
// } |
|
||||
// "dataForm.CONTENT": { |
|
||||
// deep: true, |
|
||||
// handler: function (newValue, oldValue) { |
|
||||
// this.dataForm.content1 = newValue; |
|
||||
// }, |
|
||||
// }, |
|
||||
}, |
|
||||
created() { |
|
||||
console.log(this.boardEmitItem, 'this.boardEmitItem') |
|
||||
this.getDicts('iot_template_category').then(res => { |
|
||||
this.iotTemplateCategoryList = res.data |
|
||||
console.log(this.iotTemplateCategoryList, 'this.iotTemplateCategoryList') |
|
||||
}) |
|
||||
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_size").then((res) => { |
|
||||
// this.fontSizeOpt = res.data; |
|
||||
// console.log(this.fontSizeOpt, "字体大小"); |
|
||||
// }); |
|
||||
this.getDicts('iot_device_font_inScreen_mode').then(res => { |
|
||||
this.inScreenModeOptions = res.data |
|
||||
console.log(this.inScreenModeOptions, '入屏方式') |
|
||||
}) |
|
||||
if (this.boardEmitItem) { |
|
||||
this.boardWidth = this.boardEmitItem.screenSize.split('*')[0] |
|
||||
this.boardHeight = this.boardEmitItem.screenSize.split('*')[1] |
|
||||
this.init() |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
init() { |
|
||||
this.title = '修改' |
|
||||
|
|
||||
this.dialogVisible = true |
|
||||
this.itemPropertyMap = new HashMap() |
|
||||
this.alignmentNum = 2 |
|
||||
console.log('点击编辑按钮数据回显', this.boardEmitItem) |
|
||||
this.dataForm = JSON.parse(JSON.stringify(this.boardEmitItem)) |
|
||||
this.dataForm.formatStyle = this.formatStyle |
|
||||
this.dataForm.COLOR = this.getColorValue(this.boardEmitItem.COLOR) |
|
||||
console.log(this.dataForm, 'this.dataForm') |
|
||||
// this.dataForm.FONT = this.getFont(this.boardEmitItem.FONT) |
|
||||
this.dataForm.CONTENT = JSON.parse(JSON.stringify(this.boardEmitItem.CONTENT.replace('<br>', '\n').replace(/ /g, ' ').replace('<r><n>', '\n'))) |
|
||||
// this.dataForm.STAY = JSON.parse(JSON.stringify(Number(this.boardEmitItem.STAY) / 100)) |
|
||||
this.dataForm.STAY = Number(this.boardEmitItem.playbackDuration) / 10 |
|
||||
console.log('数据回显处理后的参数', this.dataForm) |
|
||||
this.getFontSizeList() |
|
||||
}, |
|
||||
getColorValue(color) { |
|
||||
if (color == '#00FF00') { |
|
||||
return '绿色' |
|
||||
} else { |
|
||||
return color |
|
||||
} |
|
||||
}, |
|
||||
getFontSizeList() { |
|
||||
this.getDicts('iot_device_font_size').then(res => { |
|
||||
this.fontSizeOpt = res.data |
|
||||
}) |
|
||||
|
|
||||
/* getFontSizeByDevicePixel(this.dataForm.screenSize).then((res) => { |
|
||||
console.log(res, "根据分辨率筛字体大小"); |
|
||||
this.fontSizeOpt = res.data.fontSizeList; |
|
||||
});*/ |
|
||||
}, |
|
||||
changeFontSize() { |
|
||||
setTimeout(() => { |
|
||||
this.alignment(this.alignmentNum) |
|
||||
}, 100) |
|
||||
}, |
|
||||
alignment(alignmentNum) { |
|
||||
var divContent1 = document.getElementsByClassName('blackBoard1') |
|
||||
var textBoard1 = document.getElementsByClassName('textBoard1') |
|
||||
|
|
||||
switch (alignmentNum) { |
|
||||
// 左对齐 |
|
||||
case 0: |
|
||||
textBoard1[0].style.position = 'static' |
|
||||
divContent1[0].style.justifyContent = 'left' |
|
||||
divContent1[0].style.alignItems = 'center' |
|
||||
break |
|
||||
// 左右居中 |
|
||||
case 2: |
|
||||
textBoard1[0].style.position = 'static' |
|
||||
divContent1[0].style.justifyContent = 'center' |
|
||||
divContent1[0].style.alignItems = 'center' |
|
||||
break |
|
||||
// 右对齐 |
|
||||
case 1: |
|
||||
divContent1[0].style.justifyContent = 'right' |
|
||||
divContent1[0].style.alignItems = 'center' |
|
||||
textBoard1[0].style.position = 'static' |
|
||||
break |
|
||||
// 上对齐 |
|
||||
case 3: |
|
||||
divContent1[0].style.alignItems = 'flex-start' |
|
||||
textBoard1[0].style.position = 'static' |
|
||||
|
|
||||
break |
|
||||
// 上下对齐 |
|
||||
case 4: |
|
||||
divContent1[0].style.alignItems = 'center' |
|
||||
textBoard1[0].style.position = 'static' |
|
||||
|
|
||||
break |
|
||||
// 下对齐 |
|
||||
case 5: |
|
||||
divContent1[0].style.alignItems = 'flex-end' |
|
||||
textBoard1[0].style.position = 'static' |
|
||||
|
|
||||
break |
|
||||
} |
|
||||
|
|
||||
var textLeft = this.addZero(JSON.parse(JSON.stringify(textBoard1[0].offsetLeft))) |
|
||||
var textTop = this.addZero(textBoard1[0].offsetTop) |
|
||||
console.log('宽高比11111111', textLeft, textTop) |
|
||||
this.dataForm.COORDINATE = textLeft + textTop |
|
||||
this.dataForm.formatStyle = alignmentNum |
|
||||
}, |
|
||||
addZero(num) { |
|
||||
if (num < 0) { |
|
||||
return '000' |
|
||||
} else { |
|
||||
return ('000' + num).slice(-3) |
|
||||
} |
|
||||
}, |
|
||||
faceDrop(e) { |
|
||||
e.preventDefault() //阻止默认行为 |
|
||||
this.listquery.push(this.curDragImgItem) |
|
||||
}, |
|
||||
/* 拆分分辨率大小 */ |
|
||||
// resolvingPowerType(data) { |
|
||||
// let a = []; |
|
||||
// a = data.split("*"); |
|
||||
// this.width = a[0]; |
|
||||
// this.height = a[1]; |
|
||||
// }, |
|
||||
// 全选 |
|
||||
allowDrop(e) { |
|
||||
e.preventDefault() //阻止默认行为 |
|
||||
}, |
|
||||
ondragenter(e) { |
|
||||
e.preventDefault() //阻止默认行为 |
|
||||
}, |
|
||||
keyDown(ev) { |
|
||||
this.alignment(this.alignmentNum) |
|
||||
}, |
|
||||
getTextAlign(font) { |
|
||||
if (font == '0') { |
|
||||
return 'left' |
|
||||
} else if (font == '1') { |
|
||||
return 'right' |
|
||||
} else { |
|
||||
return 'center' |
|
||||
} |
|
||||
}, |
|
||||
// 表单确认 |
|
||||
dataFormSubmitHandle() { |
|
||||
console.log(this.dataForm.type, 'this.dataForm.type') |
|
||||
if (!this.dataForm.CONTENT.trim()) { |
|
||||
return this.$modal.msgError('当前输入内容为空') |
|
||||
} |
|
||||
// this.loading = true |
|
||||
// console.log('点击修改 表单', this.dataForm) |
|
||||
this.$emit('receiveForm', this.dataForm) |
|
||||
|
|
||||
// this.loading = false |
|
||||
// this.isAdd = false |
|
||||
// if (this.dataForm.type == 1) { |
|
||||
// this.dataForm.STAY = Number(this.dataForm.STAY) * 100 |
|
||||
// this.$emit('receiveForm', this.dataForm) |
|
||||
// console.log('this.dataForm修改后给父组件传表单内容', this.dataForm) |
|
||||
// } else { |
|
||||
// const tcontent = { |
|
||||
// content: this.dataForm.CONTENT, |
|
||||
// text: this.dataForm.CONTENT, |
|
||||
// coordinate: this.dataForm.COORDINATE, |
|
||||
// createBy: null, |
|
||||
// createTime: null, |
|
||||
// fontColor: this.dataForm.COLOR, |
|
||||
// fontSize: this.dataForm.FONT_SIZE.replace(/\D/g, ''), |
|
||||
// fontSpacing: this.dataForm.SPEED, |
|
||||
// fontType: this.dataForm.FONT, |
|
||||
// height: null, |
|
||||
// id: this.dataForm.id, |
|
||||
// imageUrl: null, |
|
||||
// params: {}, |
|
||||
// remark: null, |
|
||||
// searchValue: null, |
|
||||
// templateId: this.dataForm.id, |
|
||||
// updateBy: null, |
|
||||
// updateTime: null, |
|
||||
// width: null |
|
||||
// } |
|
||||
// const param = { |
|
||||
// applyType: '', |
|
||||
// category: this.dataForm.category, |
|
||||
// createBy: null, |
|
||||
// createTime: null, |
|
||||
// dictLable: null, |
|
||||
// id: this.dataForm.id, |
|
||||
// inScreenMode: this.dataForm.ACTION, |
|
||||
// isCurrency: null, |
|
||||
// params: {}, |
|
||||
// remark: '', |
|
||||
// screenSize: this.dataForm.screenSize, |
|
||||
// searchValue: null, |
|
||||
// stopTime: Number(this.dataForm.STAY) * 100, |
|
||||
// tcontents: null, |
|
||||
// templateType: null, |
|
||||
// updateBy: null, |
|
||||
// updateTime: null, |
|
||||
// vmsType: '', |
|
||||
// tcontent: tcontent, |
|
||||
// templateId: this.dataForm.id |
|
||||
// } |
|
||||
// editTemplate(param).then(data => {}) |
|
||||
// let templateContent = [] |
|
||||
// templateContent.push({ |
|
||||
// content: this.dataForm.CONTENT, |
|
||||
// fontColor: this.dataForm.COLOR, |
|
||||
// fontSize: this.dataForm.FONT_SIZE.replace(/\D/g, ''), |
|
||||
// fontType: this.dataForm.FONT, |
|
||||
// fontSpacing: this.dataForm.SPEED, |
|
||||
// coordinate: this.dataForm.COORDINATE, |
|
||||
// id: this.dataForm.tcontentsId, |
|
||||
// templateId: this.dataForm.id, |
|
||||
// formatStyle: this.dataForm.formatStyle |
|
||||
// }) |
|
||||
|
|
||||
// var params = { |
|
||||
// templateContent: templateContent, |
|
||||
// templateId: this.dataForm.id, |
|
||||
// templateDelContent: [] |
|
||||
// } |
|
||||
// console.log(params, 'params') |
|
||||
// editTemplateContent(params).then(response => { |
|
||||
// console.log(response, '返回结果') |
|
||||
// this.$modal.msgSuccess('修改成功') |
|
||||
// }) |
|
||||
// this.$forceUpdate() |
|
||||
// } |
|
||||
this.closeDialog() |
|
||||
|
|
||||
/*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 |
|
||||
console.log(this.dataForm, '点击修改 表单') |
|
||||
|
|
||||
this.loading = false |
|
||||
this.isAdd = false |
|
||||
if (this.dataForm.type == 1) { |
|
||||
this.dataForm.STAY = Number(this.dataForm.STAY) * 100 |
|
||||
this.$emit('receiveForm', this.dataForm) |
|
||||
console.log(this.dataForm, 'this.dataForm修改后给父组件传表单内容') |
|
||||
} else { |
|
||||
const tcontent = { |
|
||||
content: this.dataForm.CONTENT, |
|
||||
text: this.dataForm.CONTENT, |
|
||||
coordinate: this.dataForm.COORDINATE, |
|
||||
createBy: null, |
|
||||
createTime: null, |
|
||||
fontColor: this.dataForm.COLOR, |
|
||||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|
||||
fontSpacing: this.dataForm.SPEED, |
|
||||
fontType: this.dataForm.FONT, |
|
||||
height: null, |
|
||||
id: this.dataForm.id, |
|
||||
imageUrl: null, |
|
||||
params: {}, |
|
||||
remark: null, |
|
||||
searchValue: null, |
|
||||
templateId: this.dataForm.id, |
|
||||
updateBy: null, |
|
||||
updateTime: null, |
|
||||
width: null |
|
||||
} |
|
||||
const param = { |
|
||||
applyType: '', |
|
||||
category: this.dataForm.category, |
|
||||
createBy: null, |
|
||||
createTime: null, |
|
||||
dictLable: null, |
|
||||
id: this.dataForm.id, |
|
||||
inScreenMode: this.dataForm.ACTION, |
|
||||
isCurrency: null, |
|
||||
params: {}, |
|
||||
remark: '', |
|
||||
screenSize: this.dataForm.screenSize, |
|
||||
searchValue: null, |
|
||||
stopTime: Number(this.dataForm.STAY) * 100, |
|
||||
tcontents: null, |
|
||||
templateType: null, |
|
||||
updateBy: null, |
|
||||
updateTime: null, |
|
||||
vmsType: '', |
|
||||
tcontent: tcontent, |
|
||||
templateId: this.dataForm.id |
|
||||
} |
|
||||
editTemplate(param).then(data => {}) |
|
||||
let templateContent = [] |
|
||||
templateContent.push({ |
|
||||
content: this.dataForm.CONTENT, |
|
||||
fontColor: this.dataForm.COLOR, |
|
||||
fontSize: this.dataForm.FONT_SIZE.substring(0, 2), |
|
||||
fontType: this.dataForm.FONT, |
|
||||
fontSpacing: this.dataForm.SPEED, |
|
||||
coordinate: this.dataForm.COORDINATE, |
|
||||
id: this.dataForm.tcontentsId, |
|
||||
templateId: this.dataForm.id |
|
||||
}) |
|
||||
|
|
||||
var params = { |
|
||||
templateContent: templateContent, |
|
||||
templateId: this.dataForm.id, |
|
||||
templateDelContent: [] |
|
||||
} |
|
||||
console.log(params, 'params') |
|
||||
editTemplateContent(params).then(response => { |
|
||||
console.log(response, '返回结果') |
|
||||
this.$modal.msgSuccess('修改成功') |
|
||||
}) |
|
||||
this.$forceUpdate() |
|
||||
} |
|
||||
this.closeDialog() |
|
||||
} |
|
||||
})*/ |
|
||||
}, |
|
||||
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 |
|
||||
} |
|
||||
}, |
|
||||
closeDialog() { |
|
||||
this.dialogVisible = false |
|
||||
this.$emit('dialogClose') |
|
||||
}, |
|
||||
getDevicePixel(devicePixel, num) { |
|
||||
if (num == 0) { |
|
||||
if (devicePixel > 768) { |
|
||||
return 768 + 'px' |
|
||||
} else { |
|
||||
return devicePixel + 'px' |
|
||||
} |
|
||||
} else if (num == 1) { |
|
||||
if (devicePixel > 128) { |
|
||||
return 128 + 'px' |
|
||||
} else { |
|
||||
return devicePixel + 'px' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
getCoordinate(coordinate, num) { |
|
||||
if (num == 0) { |
|
||||
if (this.boardWidth > 768) { |
|
||||
let i = this.boardWidth / 768 |
|
||||
console.log(coordinate / i, 'width') |
|
||||
return coordinate / i + 'px' |
|
||||
} else { |
|
||||
return coordinate + 'px' |
|
||||
} |
|
||||
} else if (num == 1) { |
|
||||
if (this.boardHeight > 128) { |
|
||||
let i = this.boardHeight / 128 |
|
||||
console.log(coordinate / i, 'height') |
|
||||
return coordinate / i + 'px' |
|
||||
} else { |
|
||||
return coordinate + 'px' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
getFontSize(size) { |
|
||||
if (this.boardWidth > 768) { |
|
||||
let i = this.boardWidth / 768 |
|
||||
return size.replace(/\D/g, '') / i - 2 + 'px' |
|
||||
} else { |
|
||||
return size |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
.previewContentCSS { |
|
||||
border: yellow 1px dashed; |
|
||||
} |
|
||||
/* 页脚 */ |
|
||||
.dialog-footer { |
|
||||
padding-left: 450px; |
|
||||
} |
|
||||
.photoOther img, |
|
||||
.photo img { |
|
||||
max-width: 300px; |
|
||||
width: 100%; |
|
||||
// height: 80px; |
|
||||
} |
|
||||
.infoBoardButton { |
|
||||
::v-deep .el-radio-button--medium .el-radio-button__inner { |
|
||||
height: 3vh; |
|
||||
line-height: 3vh; |
|
||||
padding: 0 0.6vw; |
|
||||
font-size: 0.7vw; |
|
||||
} |
|
||||
} |
|
||||
::v-deep .el-card__body { |
|
||||
padding: 10px 0; |
|
||||
} |
|
||||
.boardTextStyle { |
|
||||
line-height: 1; |
|
||||
caret-color: rgba(0, 0, 0, 0); |
|
||||
user-select: none; |
|
||||
position: absolute; |
|
||||
// max-height: 128px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.blackBoard1 { |
|
||||
background: #000000; |
|
||||
display: flex; |
|
||||
margin: 0 auto; |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
// text-align: center; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
// |
|
||||
::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> |
|
||||
@ -0,0 +1,45 @@ |
|||||
|
/** |
||||
|
* |
||||
|
* @param {HTMLElement} container |
||||
|
* @param {{ target: HTMLElement }} param1 |
||||
|
*/ |
||||
|
export function moveable(container, { target } = {}) { |
||||
|
if (!target) target = container; |
||||
|
|
||||
|
target.style.cursor = "move"; |
||||
|
|
||||
|
/** |
||||
|
* @type { { clientX: number; clientY: number } } |
||||
|
*/ |
||||
|
let lastPosition = { clientX: 0, clientY: 0 }; |
||||
|
|
||||
|
const down = (e) => { |
||||
|
const { clientX: x, clientY: y } = e; |
||||
|
|
||||
|
const move = (e) => { |
||||
|
const { clientX, clientY } = e; |
||||
|
|
||||
|
console.log(clientX, clientY, "move"); |
||||
|
|
||||
|
container.style.transform = `translate3d(${ |
||||
|
clientX - x + lastPosition.clientX |
||||
|
}px, ${clientY - y + lastPosition.clientY}px, 0)`;
|
||||
|
}; |
||||
|
|
||||
|
const up = (e) => { |
||||
|
const { clientX, clientY } = e; |
||||
|
lastPosition.clientX += clientX - x; |
||||
|
lastPosition.clientY += clientY - y; |
||||
|
|
||||
|
document.removeEventListener("pointermove", move); |
||||
|
document.removeEventListener("pointerup", up); |
||||
|
}; |
||||
|
|
||||
|
document.addEventListener("pointermove", move); |
||||
|
document.addEventListener("pointerup", up); |
||||
|
}; |
||||
|
|
||||
|
target.addEventListener("pointerdown", down); |
||||
|
|
||||
|
return () => target.removeEventListener("pointerdown", down); |
||||
|
} |
||||
Loading…
Reference in new issue