fuhao
/
board_publish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(页面配置、开发相关):

This commit is contained in:
fuhao 2024-09-03 15:14:26 +08:00
parent 2a4525c2d7
commit 3f50e4bf2b
No known key found for this signature in database
9 changed files with 560 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -51,6 +51,8 @@ logs
doc
bin
.github
protocolFile
nginx
ry.bat
/LICENSE

53
ruoyi-ui/src/api/board/plantype.js Normal file
View File

@ -0,0 +1,53 @@
import request from '@/utils/request'
// 查询计划发布中的类型列表
export function listType(query) {
return request({
url: '/plan/type/list',
method: 'get',
params: query
})
}
// 查询计划发布中的类型详细
export function getType(id) {
return request({
url: '/plan/type/' + id,
method: 'get'
})
}
// 新增计划发布中的类型
export function addType(data) {
return request({
url: '/plan/type',
method: 'post',
data: data
})
}
// 修改计划发布中的类型
export function updateType(data) {
return request({
url: '/plan/type',
method: 'put',
data: data
})
}
// 删除计划发布中的类型
export function delType(id) {
return request({
url: '/plan/type/' + id,
method: 'delete'
})
}
// 查询部门下拉树结构
export function planTypeTreeSelect() {
return request({
url: '/plan/type/planTree',
method: 'get'
})
}

106
ruoyi-ui/src/views/board/component/TextPreview.vue Normal file
View File

@ -0,0 +1,106 @@
<template>
<div>
<!-- 调整缩放比例的控件 -->
<el-form label-position="left" label-width="70px">
<el-form-item label="缩放比例">
<el-row :gutter="20" align="middle">
<el-col :span="10">
<el-slider
v-model="scale"
:min="0.5"
:max="3"
:step="0.5"
show-input
input-size="mini"
/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="文字预览">
<div :style="containerStyle">
<span :style="textStyle">
{{ content }}
</span>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
scale: 1, // 默认的缩放比例
};
},
props: {
fontStyle: {
type: String,
default: 'normal',
},
fontColor: {
type: String,
default: '#ff0000', // 字体默认颜色改为红色
},
fontSize: {
type: Number,
default: 16,
},
letterSpacing: {
type: Number,
default: 0,
},
fontX: {
type: Number,
default: 0,
},
fontY: {
type: Number,
default: 0,
},
backgroundWidth: {
type: Number,
default: 320,
},
backgroundHeight: {
type: Number,
default: 160,
},
lineHeight: {
type: Number,
default: 1, // 默认行间距为1
},
content: {
type: String,
default: '这里是示例内容，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
},
},
computed: {
containerStyle() {
return {
width: `${this.backgroundWidth * this.scale}px`,
height: `${this.backgroundHeight * this.scale}px`,
position: 'relative',
background: '#000000',
overflow: 'hidden',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
};
},
textStyle() {
return {
position: 'absolute',
top: `${-this.fontY * this.scale}px`,
left: `${this.fontX * this.scale}px`,
fontStyle: this.fontStyle,
color: this.fontColor,
fontSize: `${this.fontSize * this.scale}px`,
letterSpacing: `${this.letterSpacing * this.scale}px`,
lineHeight: `${this.lineHeight}`,
};
},
},
};
</script>

54
ruoyi-ui/src/views/board/content/index.vue
View File

@ -22,9 +22,9 @@
/>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-form-item label="信息类型" prop="type">
<el-select
v-model="queryParams.type"
v-model="queryParams.infoType"
clearable
placeholder="全部"
>
@ -75,16 +75,16 @@
v-hasPermi="['board:content:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['board:content:export']"
>导出</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['board:content:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@ -138,7 +138,7 @@
/>
<!-- 添加或修改预置信息及模版对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="auto">
<el-form-item label="预置信息名称" prop="name">
<el-input v-model="form.name" placeholder="请输入预置信息名称" />
@ -199,7 +199,7 @@
</el-select>
</el-form-item>
<el-form-item label="字体大小" prop="fontSize">
<el-input-number :min="0" v-model="form.fontSize" placeholder="请输入字体大小" />
<el-input-number :min="20" :max="50" v-model="form.fontSize" placeholder="请输入字体大小" />
</el-form-item>
<el-form-item label="字体间距" prop="letterSpacing">
<el-input-number :min="0" v-model="form.letterSpacing" placeholder="请输入字体间距" />
@ -213,11 +213,18 @@
<el-form-item label="播放时间" prop="playTime">
<el-input-number :min="0" v-model="form.playTime" placeholder="请输入播放时间" />
</el-form-item>
<el-form-item label="预览路径" prop="previewPath">
<el-input v-model="form.previewPath" placeholder="请输入预览路径" />
</el-form-item>
<text-preview
fontStyle="SongTi"
:fontSize="form.fontSize"
:letterSpacing="form.letterSpacing"
:fontX="form.fontPositionX"
:fontY="form.fontPositionY"
:backgroundWidth="bgSize.width"
:backgroundHeight="bgSize.height"
:lineHeight="1"
:content="form.content" />
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
@ -228,9 +235,11 @@
<script>
import { listContent, getContent, delContent, addContent, updateContent } from "@/api/board/content";
import TextPreview from "@/views/board/component/TextPreview.vue";
export default {
name: "Content",
components: {TextPreview},
dicts: ['board_size','font_color','font_style', 'alert_type'],
data() {
return {
@ -334,6 +343,15 @@ export default {
created() {
this.getList();
},
computed:{
bgSize() {
if (!this.form.boardSize) {
return {width: 320, height:160}
}
let [height, width] = this.form.boardSize.split("*").map(Number);
return {width, height}
},
},
methods: {
/** 查询预置信息及模版列表 */
getList() {

25
ruoyi-ui/src/views/board/info/index.vue
View File

@ -98,17 +98,17 @@
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['board:info:export']"
>导出
</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['board:info:export']"-->
<!-- >导出-->
<!-- </el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
@ -228,11 +228,12 @@ import {listInfo, getInfo, delInfo, addInfo, updateInfo} from "@/api/board/info"
import {deptTreeSelect} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import TextPreview from "@/views/board/component/TextPreview.vue";
export default {
name: "Info",
dicts: ['board_size', 'board_protocol'],
components: {Treeselect},
components: {TextPreview, Treeselect},
data() {
return {
// 遮罩层

155
ruoyi-ui/src/views/board/plan/index.vue
View File

@ -1,56 +1,22 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="auto">
<el-form-item label="等级" prop="level">
<el-select
v-model="queryParams.level"
clearable
placeholder="全部"
>
<el-option
v-for="dict in dict.type.alert_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select
v-model="queryParams.type"
clearable
placeholder="全部"
>
<el-option
v-for="dict in dict.type.alert_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="最大值" prop="maxValue">
<el-row :gutter="20">
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="queryParams.maxValue"
placeholder="请输入最大值"
v-model="searchValue"
placeholder="请输入名称"
clearable
@keyup.enter.native="handleQuery"
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</el-form-item>
<el-form-item label="最小值" prop="minValue">
<el-input
v-model="queryParams.minValue"
placeholder="请输入最小值"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="head-container">
<plan-type-tree @node-clicked="handleNodeClick" :search-value="searchValue" />
</div>
</el-col>
<el-col :span="20" :xs="24">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
@ -84,32 +50,23 @@
v-hasPermi="['board:plan:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['board:plan:export']"
>导出</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['board:plan:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="planList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="唯一编号" align="center" prop="id" />
<el-table-column label="类型" align="center" prop="type">
<template slot-scope="scope">
<dict-tag :options="dict.type.alert_type" :value="scope.row.type"/>
</template>
</el-table-column>
<el-table-column label="等级" align="center" prop="level">
<template slot-scope="scope">
<dict-tag :options="dict.type.alert_level" :value="scope.row.level"/>
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="typeName" />
<el-table-column label="等级" align="center" prop="level" />
<el-table-column label="最大值" align="center" prop="maxValue" />
<el-table-column label="最小值" align="center" prop="minValue" />
<el-table-column label="显示内容" align="center" prop="displayContent" />
@ -139,36 +96,17 @@
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
<!-- 添加或修改警报计划对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="等级" prop="level">
<el-select
v-model="form.level"
placeholder="全部"
:value="1"
>
<el-option
v-for="dict in dict.type.alert_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-input v-model="form.level" placeholder="请输入等级" />
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select
v-model="form.type"
placeholder="全部"
>
<el-option
v-for="dict in dict.type.alert_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
<el-form-item label="类型" prop="typeName">
<el-input v-model="clickNodeData.label" disabled />
</el-form-item>
<el-form-item label="最小值" prop="minValue">
<el-input-number :min="0" :precision="2" v-model="form.minValue" placeholder="请输入最小值" />
@ -190,12 +128,16 @@
<script>
import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/board/plan";
import PlanTypeTree from "@/views/board/plan/planTypeTree.vue";
import {planTypeTreeSelect} from "@/api/board/plantype";
export default {
name: "Plan",
components: {PlanTypeTree},
dicts: ['alert_level','alert_type'],
data() {
return {
searchValue: "",
// 遮罩层
loading: true,
// 选中数组
@ -224,6 +166,10 @@ export default {
minValue: null,
displayContent: null
},
clickNodeData: {
id: 0,
label: "",
},
// 表单参数
form: {},
// 表单校验
@ -247,7 +193,7 @@ export default {
};
},
created() {
this.getList();
this.getPlanTypeTree();
},
methods: {
/** 查询警报计划列表 */
@ -304,8 +250,6 @@ export default {
const id = row.id || this.ids
getPlan(id).then(response => {
this.form = response.data;
this.form.type += '';
this.form.level += '';
this.open = true;
this.title = "修改警报计划";
});
@ -321,6 +265,7 @@ export default {
this.getList();
});
} else {
this.form.type = this.clickNodeData.id;
addPlan(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
@ -346,10 +291,18 @@ export default {
...this.queryParams
}, `plan_${new Date().getTime()}.xlsx`)
},
/** 字典翻译 */
dictAlertPlanTypeFormat(){
}
}
handleNodeClick(data) {
this.clickNodeData = data;
this.queryParams.type = data.id;
this.handleQuery();
},
getPlanTypeTree() {
planTypeTreeSelect().then(response => {
this.clickNodeData = response.data[0].children[0];
this.queryParams.type = response.data[0].children[0].id;
this.getList();
});
},
},
};
</script>

200
ruoyi-ui/src/views/board/plan/planTypeTree.vue Normal file
View File

@ -0,0 +1,200 @@
<template>
<div>
<el-tree
:data="planTypeOptions"
node-key="id"
:props="defaultProps"
:filter-node-method="filterNode"
@node-click="handleNodeClick"
:expand-on-click-node="false"
ref="tree"
default-expand-all
highlight-current
>
<template #default="{ node, data }">
<div class="custom-tree-node">
<span>{{ data.label }}</span>
<span class="custom-tree-node-btns">
<el-button
type="text"
icon="el-icon-plus"
@click="handleAdd(node, data)"
></el-button>
<el-button
type="text"
icon="el-icon-minus"
@click="handleDelete(node, data)"
></el-button>
</span>
</div>
</template>
</el-tree>
<!-- 新增节点对话框 -->
<el-dialog
title="新增节点"
:visible.sync="dialogVisible">
<el-form :model="form" label-width="auto">
<el-form-item label="类型名称">
<el-row>
<el-col :span="8">
<el-input v-model="form.label"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="节点类型">
<el-row>
<el-col :span="8">
<el-select v-model="form.addType">
<el-option
v-for="item in [{label: '同级',value: true},{label: '子级',value: false},]"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmAdd">确定</el-button>
</div>
</el-dialog>
<!-- 删除确认框 -->
<el-dialog
title="确认删除"
:visible.sync="deleteDialogVisible"
>
<span>确定删除节点 "{{ selectedNodeLabel }}" 吗？</span>
<div slot="footer" class="dialog-footer">
<el-button @click="deleteDialogVisible = false">取消</el-button>
<el-button type="danger" @click="confirmDelete">删除</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {addType, delType, planTypeTreeSelect} from "@/api/board/plantype";
export default {
name: "PlanTypeTree",
watch: {
// 根据名称筛选部门树
searchValue(val) {
this.$refs.tree.filter(val);
},
},
props: {
searchValue: {
type: String,
default: "",
}
},
data() {
return {
planTypeOptions: undefined,
treeData: [],
dialogVisible: false,
deleteDialogVisible: false,
form: {
label: "",
addType: true,
selectedNodeId: 0,
selectedNodeLevel: 0,
selectedNodeParentId: 0,
},
parentNodeLabel: "",
selectedNode: null,
selectedNodeLabel: "",
defaultProps: {
children: "children",
label: "label",
},
};
},
methods: {
handleAdd(node, data) {
this.selectedNode = node;
this.parentNodeLabel = data.label;
this.dialogVisible = true;
},
confirmAdd() {
let addObj = {
typeName: this.form.label,
parentId: this.form.selectedNodeId,
}
if (this.form.addType === true) {
addObj.parentId = this.form.selectedNodeLevel === 1 ? 0 : this.form.selectedNodeParentId;
}
addType(addObj).then(resp => {
this.$modal.msgSuccess("新增成功");
this.getPlanTypeTree();
})
this.dialogVisible = false;
},
handleDelete(node, data) {
this.selectedNode = node;
this.selectedNodeLabel = data.label;
this.deleteDialogVisible = true;
},
confirmDelete() {
delType(this.form.selectedNodeId).then(resp => {
this.$modal.msgSuccess("删除成功");
this.getPlanTypeTree();
})
this.deleteDialogVisible = false;
},
handleNodeClick(data, node) {
if (node.level < 2) {
return;
}
this.$emit('node-clicked', data);
this.form.selectedNodeId = data.id;
this.form.selectedNodeLevel = node.level;
if (node.level === 1) {
this.form.selectedNodeParentId = 0;
} else {
this.form.selectedNodeParentId = node.parent.data.id;
}
},
/** 查询类型下拉树结构 */
getPlanTypeTree() {
planTypeTreeSelect().then(response => {
this.planTypeOptions = response.data;
});
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
},
created() {
this.getPlanTypeTree();
},
};
</script>
<style scoped>
.custom-tree-node {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: relative;
}
.custom-tree-node-btns {
display: none;
position: absolute;
right: 0;
}
.custom-tree-node:hover .custom-tree-node-btns {
display: flex;
}
</style>

57
ruoyi-ui/src/views/index.vue
View File

@ -1,33 +1,34 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="4" :xs="24">
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
</el-row>
<h1>瓷器活发布系统</h1>
<!-- <el-row :gutter="20">-->
<!-- &lt;!&ndash;部门数据&ndash;&gt;-->
<!-- <el-col :span="4" :xs="24">-->
<!-- <div class="head-container">-->
<!-- <el-input-->
<!-- v-model="deptName"-->
<!-- placeholder="请输入部门名称"-->
<!-- clearable-->
<!-- size="small"-->
<!-- prefix-icon="el-icon-search"-->
<!-- style="margin-bottom: 20px"-->
<!-- />-->
<!-- </div>-->
<!-- <div class="head-container">-->
<!-- <el-tree-->
<!-- :data="deptOptions"-->
<!-- :props="defaultProps"-->
<!-- :expand-on-click-node="false"-->
<!-- :filter-node-method="filterNode"-->
<!-- ref="tree"-->
<!-- node-key="id"-->
<!-- default-expand-all-->
<!-- highlight-current-->
<!-- @node-click="handleNodeClick"-->
<!-- />-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
</div>
</template>

2
ruoyi-ui/vue.config.js
View File

@ -9,7 +9,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '瓷器活发布系统' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口
const port = process.env.port || process.env.npm_config_port || 8888 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions