Browse Source

完善

wangqin
hui 1 year ago
parent
commit
8d3f86a6c3
  1. 4
      ruoyi-ui/package.json
  2. 39
      ruoyi-ui/src/common/scrollbar.js
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue
  4. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue
  5. 4
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardInfoEditor.vue
  6. 498
      ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue
  7. 3
      ruoyi-ui/vue.config.js

4
ruoyi-ui/package.json

@ -98,9 +98,11 @@
"vue-resource": "^1.5.3",
"vue-router": "3.4.9",
"vue-seamless-scroll": "^1.1.23",
"vue-slick-carousel": "^1.0.6",
"vue-splitpane": "1.0.4",
"vue-video-player": "^5.0.2",
"vuedraggable": "2.24.3",
"vuescroll": "^4.18.1",
"vuex": "3.6.0"
},
"devDependencies": {
@ -130,7 +132,7 @@
"plop": "2.3.0",
"runjs": "4.4.2",
"sass": "^1.39.0",
"sass-loader": "10.1.1",
"sass-loader": "^10.5.2",
"script-ext-html-webpack-plugin": "2.1.5",
"serve-static": "1.13.2",
"snapsvg": "^0.5.1",

39
ruoyi-ui/src/common/scrollbar.js

@ -0,0 +1,39 @@
export default {
vuescroll: {
mode: "native", //模式:pc natice 移动端是slice
sizeStrategy: 'percent', //父元素是否是固定的是就percent 不是就是number 填一个数值
detectResize: true, //内容是否根据页面调整
},
scrollPanel: {
initialScrollY: false, //初始化距离顶部的位置
initialScrollX: false, //初始化距离左侧的位置
scrollingX: false, // 是否开启横向滚动
scrollingY: true, //是否开启竖向滚动
speed: 300, //多长时间内完成一次滚动。 数值越小滚动的速度越快。
easing: 'easeInQuad', //默认动画
verticalNativeBarPos: "right",
maxHeight: undefined, //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应,超出的话出现滚动条。
maxWidth: undefined, //这是滚动条最大宽度,内容宽度小于 maxWidth 时高度自适应,超出的话出现滚动条。
},
rail: {
background: "#000000", //轨道的背景色。
opacity: 0.4, //轨道的透明度。 0是透明,1是不透明
size: "8px", //轨道的尺寸。
specifyBorderRadius: false, //是否指定轨道的 borderRadius, 如果不那么将会自动设置。
gutterOfEnds: null,
gutterOfSide: "0px", //距离容器的距离
keepShow: false, //是否即使 bar 不存在的情况下也保持显示。
},
bar: {
showDelay: 500, //在鼠标离开容器后多长时间隐藏滚动条。
onlyShowBarOnScroll: false, //是否只在滚动时显示 bar。
keepShow: true, //滚动条是否保持显示。
background: "#007799", //滚动条背景色。
opacity: 1, //滚动条透明度。
hoverStyle: false,
specifyBorderRadius: false, //是否指定滚动条的 borderRadius, 如果不那么和轨道的保持一致。
minSize: false, //为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.
size: "8px", //bar 的尺寸。
disable: false, //是否禁用滚动条。
}
};

2
ruoyi-ui/src/views/JiHeExpressway/components/Dialog/index.vue

@ -95,7 +95,7 @@ export default {
position: absolute;
background: rgba(78, 174, 204, .6);
height: 2px;
width: calc(sqrt(pow(var(--clip-width-num), 2) * 2) * 1px);
// width: calc(sqrt(pow(var(--clip-width-num), 2) * 2) * 1px);
right: calc(var(--clip-width) / -2);
top: -2px;
transform-origin: top left;

2
ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/index.vue

@ -43,7 +43,7 @@
<script>
import Card from "@screen/components/Card2/Card.vue";;
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
import RadioGroup from '@screen/components/RadioGroup/index.vue';
import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
import TimeLine1 from "@screen/components/TimeLine/TimeLine1/index";
import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index";

4
ruoyi-ui/src/views/JiHeExpressway/pages/service/board/BoardInfoEditor.vue

@ -1,9 +1,9 @@
<template>
<el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="43%" append-to-body :close-on-click-modal="false">
<div style="color:#fff">
<!-- <div style="color:#fff">
<p>类型:{{type}} 增删改类型:{{mode}}</p>
<p>模板id:{{ tpl }}</p>
</div>
</div> -->
<div class="dialogStyleBox">
<div class="dialogLine"></div>
<div class="dialogCloseButton"></div>

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

@ -1,149 +1,134 @@
<template>
<div class="container infoBoardBox" style="height:94vh;;background-color: #11232a;">
<div style="
height: 100%;
margin-left: 0px;
margin-right: 0px;
display: flex;
justify-content: space-between;
">
<div style="width: 20%" class="verticalBox">
<div style="width:100%;height:100%;padding:1vh 0.2vw;">
<div style="width:100%;height:100%;background-color:#112d3b;padding:0 0 1vh 0;">
<div class="bigTitle qbbBigTitle">
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
<div>情报板列表</div>
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
</div>
<el-form ref="form" style="padding:0 0.5vw;" :model="form">
<el-form-item style="margin-bottom: 12px;">
<el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;">
<el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="____changeDirection(item.dictValue)" />
</el-select>
</el-form-item>
<el-form-item>
<!-- {{ boardSizeDic }} -->
<el-collapse v-model="selectedSize" accordion @change="____onChangeSize">
<el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key">
<div v-if="item.list.length>0">
<!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
</el-checkbox> -->
<el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1">
<el-checkbox v-for="(itm, index) in item.list" :label="itm.id" :key="index">
<el-tooltip :content="itm.ip" placement="top">
<div>{{ itm.deviceName }}</div>
</el-tooltip>
<el-tooltip content="回读当前信息" placement="top">
<el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.id)" :disabled="submitButton"></el-button>
</el-tooltip>
</el-checkbox>
</el-checkbox-group>
</div>
<div v-else style="color: #fff; text-align: center; line-height: 60px;">暂无数据</div>
</el-collapse-item>
</el-collapse>
</el-form-item>
</el-form>
<div class="infoBoardBox">
<div class="infoBoardCon">
<div style="width: 20%" class="part partLeft">
<div class="partTitle boardListTitle">
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
<div>情报板列表</div>
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
</div>
</div>
<el-form ref="form" :model="form" class="partCon">
<el-form-item style="margin-bottom: 12px;">
<el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;">
<el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="____changeDirection(item.dictValue)" />
</el-select>
</el-form-item>
<el-form-item>
<!-- {{ boardSizeDic }} -->
<el-collapse v-model="selectedSize" accordion @change="____onChangeSize">
<el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key">
<div v-if="item.list.length>0">
<!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
</el-checkbox> -->
<el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1">
<el-checkbox v-for="(itm, index) in item.list" :label="itm.id" :key="index">
<el-tooltip :content="itm.ip" placement="top">
<div>{{ itm.deviceName }}</div>
</el-tooltip>
<el-tooltip content="回读当前信息" placement="top">
<el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.id)" :disabled="submitButton"></el-button>
</el-tooltip>
</el-checkbox>
</el-checkbox-group>
</div>
<div v-else style="color: #fff; text-align: center; line-height: 60px;">暂无数据</div>
</el-collapse-item>
</el-collapse>
</el-form-item>
</el-form>
</div>
<div style="width: 37.8%" class="verticalBox verticalBoxBorderLeft">
<div style="width:100%;height:100%;padding:1vh 0.2vw;">
<div style="width:100%;height:100%;background-color:#112d3b;">
<div class="bigTitle awaitBigTitle">
<div>
<div style="display: flex;justify-content: start !important;align-items: center;">
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
<div>{{ selectedDevice.deviceName }}</div>
<span v-if="selectedSize"> {{ selectedSize }}</span>
</div>
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
</div>
<div class="controlBox">
<el-button type="primary" @click.native="openDialogVisible(1, 2)">添加信息</el-button>
<el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button>
<div style="width: 37.8%" class="part partMiddle">
<div class="partTitle partDeviceTempateTitle">
<div>
<div style="display: flex;justify-content: start !important;align-items: center;">
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
<div>{{ selectedDevice.deviceName }}</div>
<span v-if="selectedSize"> {{ selectedSize }}</span>
</div>
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
</div>
<div class="contentBox">
<el-table :data="contentList" row-key="ID" v-loading="loading" style="height: 100%;padding: 0 1vh; background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex">
<el-table-column width="545">
<template slot-scope="scope">
<div class="con">
<div style="background: black; position: relative" :style="{
color: getColorStyle(scope.row.COLOR) ,
fontSize: getFontSize(scope.row.FONT_SIZE),
fontFamily: scope.row.FONT,
width: getScreenSize(form.selectedPixel, 'width') + 'px',
height: getScreenSize(form.selectedPixel, 'height') + 'px',
'lineHeight':'1',
'display': 'flex',
'align-items': 'center',
'justify-content': getTextAlign(scope.row.formatStyle),
}">
<span :style="{
/*left: getCoordinate(
scope.row.COORDINATE.substring(0, 3),
'left'
),
top: getCoordinate(
scope.row.COORDINATE.substring(3, 6),
'top'
),*/
position:'relative',
maxHeight:getScreenSize(form.selectedPixel, 'height') + 'px',
}" class="infoTxt" v-html="
scope.row.CONTENT? scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, '&nbsp'): ''"></span>
</div>
</div>
</template>
</el-table-column>
<el-table-column width="130">
<template slot-scope="scope">
<div class="infoBtnBox">
<!-- <el-tooltip content="加入信息模板" placement="top">
<div @click="arrowRight(scope.row)"></div>
</el-tooltip> -->
<el-tooltip content="编辑" placement="top">
<div @click="openQbbDrawer(scope.row, scope.$index, 1)" class="edit"></div>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<div @click="delQbbDrawer(scope.$index)" class="del"></div>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
<div class="controlBox">
<el-button type="primary" @click.native="openDialogVisible(1, 2)">添加信息</el-button>
<el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button>
</div>
</div>
</div>
<div class="partCon">
<el-table :data="contentList" row-key="ID" v-loading="loading" style="height: 100%;padding: 0 1vh; background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex">
<el-table-column width="545">
<template slot-scope="scope">
<div class="con">
<div style="background: black; position: relative" :style="{
color: getColorStyle(scope.row.COLOR) ,
fontSize: getFontSize(scope.row.FONT_SIZE),
fontFamily: scope.row.FONT,
width: getScreenSize(form.selectedPixel, 'width') + 'px',
height: getScreenSize(form.selectedPixel, 'height') + 'px',
'lineHeight':'1',
'display': 'flex',
'align-items': 'center',
'justify-content': getTextAlign(scope.row.formatStyle),
}">
<span :style="{
/*left: getCoordinate(
scope.row.COORDINATE.substring(0, 3),
'left'
),
top: getCoordinate(
scope.row.COORDINATE.substring(3, 6),
'top'
),*/
position:'relative',
maxHeight:getScreenSize(form.selectedPixel, 'height') + 'px',
}" class="infoTxt" v-html="
scope.row.CONTENT? scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, '&nbsp'): ''"></span>
</div>
</div>
</template>
</el-table-column>
<el-table-column width="130">
<template slot-scope="scope">
<div class="infoBtnBox">
<!-- <el-tooltip content="加入信息模板" placement="top">
<div @click="arrowRight(scope.row)"></div>
</el-tooltip> -->
<el-tooltip content="编辑" placement="top">
<div @click="openQbbDrawer(scope.row, scope.$index, 1)" class="edit"></div>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<div @click="delQbbDrawer(scope.$index)" class="del"></div>
</el-tooltip>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 信息模板 -->
<div style=" width: 42.2%" class="verticalBox verticalBoxBorderLeft">
<div style="width:100%;height:100%;padding:1vh 0.2vw;">
<div style="width:100%;height:100%;background-color:#112d3b">
<div class="bigTitle awaitBigTitle">
<div>
<div style="display: flex;justify-content: start !important;align-items: center;">
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
<div>信息模板<span v-if="selectedSize">[{{ selectedSize }}]</span></div>
</div>
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
<!-- <span>信息模板</span>
<span v-if="form.selectedPixel"> {{ form.selectedPixel }}</span> -->
</div>
<div class="controlBox">
<el-button type="primary" @click="____onAddTemplate">添加模板</el-button>
<div style=" width: 42.2%" class="part partRight">
<div class="partTitle partDeviceTempateTitle">
<div>
<div style="display: flex;justify-content: start !important;align-items: center;">
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt="">
<div>信息模板<span v-if="selectedSize">[{{ selectedSize }}]</span></div>
</div>
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
<!-- <span>信息模板</span>
<span v-if="form.selectedPixel"> {{ form.selectedPixel }}</span> -->
</div>
<div class="controlBox">
<el-button type="primary" @click="____onAddTemplate">添加模板</el-button>
</div>
<div class="templateBox">
</div>
<div class="partCon">
<vuescroll :ops="scrollOptions" class="templateBox">
<div v-for="(item,index) in templateAvailable" :key="item.dictValue">
<!-- 原来是<el-collapse v-model="activeNames"> -->
<h3>{{ item.dictLabel }}</h3>
<div v-for="(itm, indx) in item.list" :key="indx" class="infoItem">
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
<!-- 模板内容 -->
<BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
<!-- <div class="infoPreview">
@ -165,9 +150,8 @@
</div>
</div>
</div>
</div>
</vuescroll>
</div>
</div>
</div>
</div>
<el-dialog title="提示" :visible.sync="arrowRightVisible" width="20%" :before-close="dialogClose">
@ -202,6 +186,9 @@ import { getBoardList } from '@/api/board/board'
import { getTemplateList } from '@/api/board/template'
import BoardPreview from './BoardPreview'
import vuescroll from 'vuescroll'
import scrollOptions from '@/common/scrollbar.js'
//
export const deepClone = data => {
//
@ -232,7 +219,8 @@ export default {
components: {
BoardInfoEditor,
editInfo,
BoardPreview
BoardPreview,
vuescroll
},
dicts: ['iot_board_direction'],
@ -285,7 +273,8 @@ export default {
type:"",
visible:false,
tpl:{}
}
},
scrollOptions
}
},
watch: {
@ -372,7 +361,7 @@ computed:{
rowDrop() {
if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
// DOM
const tbody = document.querySelector('.contentBox .el-table__body-wrapper tbody')
const tbody = document.querySelector('.partCon .el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
//
@ -1060,128 +1049,133 @@ computed:{
}
</script>
<style lang="scss" scoped>
.container {
.verticalBox {
.infoBoardBox {
.infoBoardCon{
width: 100%;
height: 100%;
padding: 10px 5px;
.bigTitle {
padding: 0px 0;
/* // border-bottom: 1px solid #05afe3; */
margin-bottom: 10px;
display: flex;
justify-content: space-between;
height: 60px;
font-size: 0.8vw;
align-items: center;
}
.contentBox {
width: 100%;
height: calc(100% - 46px);
padding: 0 0 1vh 0;
/* // overflow: auto; */
.con {
/* // border: 1px solid #05afe3; */
height: 75px;
position: relative;
width: 540px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #004c64;
display: flex; flex-direction: row;
align-items: stretch;
padding: 20px;
.part {
background-color: #133242;
margin-right: 10px;
display: flex; flex-direction: column;
&.partRight{
margin-right: 0;
}
/* // } */
.controlBox {
display: flex;
justify-content: center;
.partTitle {
padding: 0px 0;
/* // border-bottom: 1px solid #05afe3; */
margin-bottom: 10px;
}
}
.templateBox {
width: 100%;
height: calc(100% - 46px);
padding: 0 0 1vh 0;
.infoItem {
display: flex;
box-sizing: content-box;
align-items: stretch;
margin-bottom: 10px;
.boardPreview{
border: 2px solid #004c64;
// width: 560px;
// height:80px;
flex: 1;
justify-content: space-between;
height: 60px;
font-size: 18px;
align-items: center;
}
.partCon {
flex: 1;
height: 0;
padding:10px;
.con {
/* // border: 1px solid #05afe3; */
height: 75px;
position: relative;
width: 540px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #004c64;
}
.infoBtnBox {
width: 160px;
height: 80px;
display: flex;
float: right;
margin-left: 10px;
padding: 0 0.2vw;
/* // border: solid 1px #05afe3; */
/* // } */
.controlBox {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
}
.templateBox {
width: 100%; height: 100%;
.tplItem {
margin-right: 14px;
display: flex;
align-items: stretch;
margin-bottom: 10px;
.boardPreview{
border: 2px solid #004c64;
display: flex;
justify-content: space-around;
align-items: center;
.btn {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 40px;
height: 40px;
&.btnApply{
background-image: url(~@/assets/jihe/images/button/toLeft.png);
}
&.btnEdit{
background-image: url(~@/assets/jihe/images/button/edit.png);
// width: 560px;
// height:80px;
flex: 1;
}
.infoBtnBox {
width: 160px;
height: 80px;
display: flex;
float: right;
margin-left: 10px;
padding: 0 0.2vw;
/* // border: solid 1px #05afe3; */
border: 2px solid #004c64;
display: flex;
justify-content: space-around;
align-items: center;
.btn {
background-repeat: no-repeat;
background-size: 100% 100%;
width: 40px;
height: 40px;
&.btnApply{
background-image: url(~@/assets/jihe/images/button/toLeft.png);
}
&.btnDelete{
background-image: url(~@/assets/jihe/images/button/delete.png);
&.btnEdit{
background-image: url(~@/assets/jihe/images/button/edit.png);
}
&.btnDelete{
background-image: url(~@/assets/jihe/images/button/delete.png);
}
}
}
i {
font-size: 24px;
color: #666;
padding-left: 4px;
cursor: pointer;
caret-color: rgba(0, 0, 0, 0);
user-select: none;
}
i:hover {
color: #05afe3;
}
.disabledClass {
pointer-events: none;
cursor: auto !important;
color: #ccc;
}
i {
font-size: 24px;
color: #666;
padding-left: 4px;
cursor: pointer;
caret-color: rgba(0, 0, 0, 0);
user-select: none;
}
i:hover {
color: #05afe3;
}
.disabledClass {
pointer-events: none;
cursor: auto !important;
color: #ccc;
}
}
}
.controlBox {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.el-collapse {
max-height: 100% !important;
overflow: auto;
border-bottom: none;
border-top: none;
padding: 0 0.5vw;
}
}
.controlBox {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
.el-collapse {
max-height: 100% !important;
overflow: auto;
border-bottom: none;
border-top: none;
padding: 0 0.5vw;
}
}
}
@ -1242,7 +1236,7 @@ computed:{
color: #05afe3 !important;
}
.qbbBigTitle {
.boardListTitle {
// margin-top: 1vh;
color: #fff;
height: 35px !important;
@ -1260,10 +1254,10 @@ computed:{
height: 22px;
margin: 0 0.5vw 0 0.5vw;
}
.awaitBigTitle {
.partDeviceTempateTitle {
width: 100%;
color: #fff;
padding-right: 6vw !important;
padding-right: 110px !important;
height: 35px !important;
background-image: url('~@/assets/screen/xtb/qbbti.png');
background-size: 100% 100%;

3
ruoyi-ui/vue.config.js

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

Loading…
Cancel
Save