ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
qianlishi 3 years ago
parent 0d1d40e4cc
commit 50671ced8a
4 changed files with 269 additions and 260 deletions
Show Stats Download Patch File Download Diff File

2
report-ui/index.html
Unescape Escape View File

@ -8,7 +8,7 @@
<link rel='stylesheet' href='./static/luckysheet/plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.css' />
<link rel='stylesheet' href='./static/luckysheet/css/luckysheet.css' />
<link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' />
<!-- <link rel='stylesheet' href='./static/luckysheet/assets/iconfont/iconfont.css' /> -->
<script src="./static/luckysheet/plugins/js/plugin.js"></script>
<script src="./static/luckysheet/luckysheet.umd.js"></script>

7
report-ui/src/assets/iconfont/iconfont.css
Unescape Escape View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 1513211 */
src: url('iconfont.woff2?t=1629797734566') format('woff2'),
url('iconfont.woff?t=1629797734566') format('woff'),
url('iconfont.ttf?t=1629797734566') format('truetype');
src: url("iconfont.woff2?t=1629797734566") format("woff2"),
url("iconfont.woff?t=1629797734566") format("woff"),
url("iconfont.ttf?t=1629797734566") format("truetype");
}
.iconfont {
@ -488,4 +488,3 @@
.iconjiantou-copy-copy:before {
content: "\e654";
}

501
report-ui/src/views/report/excelreport/designer/index.vue
Unescape Escape View File

@ -9,33 +9,44 @@
<div class="layout-left">
<div class="add-collection">
数据集管理
<el-button type="text"
icon="el-icon-circle-plus-outline"
@click="queryAllDataSet()"/>
<el-button
type="text"
icon="el-icon-circle-plus-outline"
@click="queryAllDataSet()"
/>
</div>
<div>
<el-collapse v-for="(item, indexs) in dataSet"
:key="indexs"
v-model="activeNames"
@change="handleChange">
<el-collapse-item :title="item.setName"
:name="item.id">
<el-popconfirm :title="'确定删除' + item.setName + '吗？'"
@onConfirm="del(item)">
<el-button slot="reference"
type="text"
icon="el-icon-close"
class="delect-all"/>
<el-collapse
v-for="(item, indexs) in dataSet"
:key="indexs"
v-model="activeNames"
@change="handleChange"
>
<el-collapse-item :title="item.setName" :name="item.id">
<el-popconfirm
:title="'确定删除' + item.setName + '吗？'"
@onConfirm="del(item)"
>
<el-button
slot="reference"
type="text"
icon="el-icon-close"
class="delect-all"
/>
</el-popconfirm>
<draggable v-model="item.setParamList"
:sort="false"
group="people"
style="margin-left: 10px"
@start="onStart(item.setCode, $event)">
<draggable
v-model="item.setParamList"
:sort="false"
group="people"
style="margin-left: 10px"
@start="onStart(item.setCode, $event)"
>
<!-- <transition-group> -->
<div v-for="(i, index) in item.setParamList"
:key="index"
class="field-container">
<div
v-for="(i, index) in item.setParamList"
:key="index"
class="field-container"
>
<div class="aRow">
<span>{{ i }}</span>
</div>
@ -48,156 +59,148 @@
</div>
<div class="layout-middle">
<div class="push_btn">
<el-tooltip class="item"
effect="dark"
content="预览"
placement="bottom-start">
<el-button type="text"
@click="preview()">
<el-tooltip
class="item"
effect="dark"
content="预览"
placement="bottom-start"
>
<el-button type="text" @click="preview()">
<i class="iconfont iconfuzhi"></i>
</el-button>
</el-tooltip>
<el-tooltip class="item"
effect="dark"
content="保存"
placement="bottom-start">
<el-button type="text"
@click="save()">
<el-tooltip
class="item"
effect="dark"
content="保存"
placement="bottom-start"
>
<el-button type="text" @click="save()">
<i class="iconfont iconsave"></i>
</el-button>
</el-tooltip>
</div>
<div id="luckysheet"
style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;"/>
<div id="qrCode"
ref="qrCodeDiv"/>
<img id="barCode">
<div
id="luckysheet"
style="margin:0px;padding:0px;position:absolute;width:100%;height:95vh;left: 0px;top: 30px;bottom:0px;"
/>
<div id="qrCode" ref="qrCodeDiv" />
<img id="barCode" />
</div>
<div class="layout-right">
<el-tabs v-model="activeName"
@tab-click="handleClick">
<el-tab-pane label="基础配置"
name="first">
<el-form ref="rightForm"
:model="rightForm"
label-width="60px">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基础配置" name="first">
<el-form ref="rightForm" :model="rightForm" label-width="60px">
<el-form-item label="坐标">
<el-input v-model="rightForm.coordinate"/>
<el-input v-model="rightForm.coordinate" />
</el-form-item>
<el-form-item label="值">
<el-input v-model="rightForm.value"/>
<el-input v-model="rightForm.value" />
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<el-dialog title="数据集管理"
:visible.sync="outerVisible">
<el-table ref="multipleTable"
:data="dataSetData"
tooltip-effect="dark"
style="width: 100%;height: 60vh;overflow-y: scroll;"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width="55"/>
<el-table-column label="数据集名称"
width="120"
prop="setName"/>
<el-table-column prop="setDesc"
label="数据集描述"
width="180"/>
<el-table-column prop="setCode"
label="数据集编码"
show-overflow-tooltip/>
<el-dialog title="数据集管理" :visible.sync="outerVisible">
<el-table
ref="multipleTable"
:data="dataSetData"
tooltip-effect="dark"
style="width: 100%;height: 60vh;overflow-y: scroll;"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="数据集名称" width="120" prop="setName" />
<el-table-column prop="setDesc" label="数据集描述" width="180" />
<el-table-column
prop="setCode"
label="数据集编码"
show-overflow-tooltip
/>
</el-table>
<div slot="footer"
class="dialog-footer">
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary"
@click="checkDataSet()">确定
</el-button>
<el-button type="primary" @click="checkDataSet()">确定 </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import draggable from 'vuedraggable'
import {queryAllDataSet, detail, detailByReportCode} from '@/api/GaeaReport'
import {addReportExcel, editReportExcel} from '@/api/report'
import ColorPicker from '../../bigscreen/designer/form/colorPicker.vue'
import draggable from "vuedraggable";
import { queryAllDataSet, detail, detailByReportCode } from "@/api/GaeaReport";
import { addReportExcel, editReportExcel } from "@/api/report";
import ColorPicker from "../../bigscreen/designer/form/colorPicker.vue";
// import QRCode from 'qrcodejs2'
// import JsBarcode from 'jsbarcode'
export default {
name: 'Excels',
name: "Excels",
components: {
draggable,
ColorPicker,
ColorPicker
},
data() {
return {
activeName: 'first',
activeNames: ['1'],
activeName: "first",
activeNames: ["1"],
reportId: null,
accessKey: null,
reportCode: '',
reportCode: "",
options: [],
sheet: {},
sheetData: [],
dataSetData: [],
reportExcelDto: {
id: null,
jsonStr: '',
setCodes: '',
setParam: '',
reportCode: '',
jsonStr: "",
setCodes: "",
setParam: "",
reportCode: ""
},
multipleSelection: [],
rightForm: {
coordinate: '',
value: '',
coordinate: "",
value: ""
},
qrCodeForm: {
type: 'QRCode',
content: 'https://www.baidu.com',
type: "QRCode",
content: "https://www.baidu.com",
width: 125,
height: 125,
colorDark: '#333333', // 二维码颜色
colorLight: '#ffffff', // 二维码背景色
colorDark: "#333333", // 二维码颜色
colorLight: "#ffffff", // 二维码背景色
// correctLevel: QRCode.CorrectLevel.L, // 容错率，L/M/H
ri: 0,
ci: 0,
currentSrc: '',
currentSrc: ""
},
barCodeForm: {
type: 'BarCode',
format: 'CODE39',
type: "BarCode",
format: "CODE39",
displayValue: true,
content: '99999999999',
lineColor: '#000',
background: '#fff',
content: "99999999999",
lineColor: "#000",
background: "#fff",
width: 100,
height: 40,
ri: 0,
ci: 0,
currentSrc: '',
currentSrc: ""
},
formPrintSetting: {
size: '',
pixel1: '',
pixel2: ''
size: "",
pixel1: "",
pixel2: ""
},
pixelList: [
{paper: 'A4', width: 210, height: 297},
{paper: 'A3', width: 297, height: 420},
{paper: 'Letter', width: 216, height: 279},
{paper: 'Legal', width: 216, height: 355},
{paper: 'Executive', width: 184, height: 266}
{ paper: "A4", width: 210, height: 297 },
{ paper: "A3", width: 297, height: 420 },
{ paper: "Letter", width: 216, height: 279 },
{ paper: "Legal", width: 216, height: 355 },
{ paper: "Executive", width: 184, height: 266 }
],
dataSet: [],
outerVisible: false,
@ -209,248 +212,252 @@ export default {
dialogBarCode: false,
paperList: [],
// 纸张标识
paper: '',
paper: "",
// 纸张宽高
width: '',
height: '',
width: "",
height: "",
// 清晰度
definition: '',
definition: "",
// 是否套打
isBackend: '',
dpi: '',
pxWidth: '',
pxHeight: '',
isBackend: "",
dpi: "",
pxWidth: "",
pxHeight: "",
show: false,
config: '',
config: "",
settings: {},
qrCodeList: [],
moveDataelse: {
x: null,
y: null
}
}
},
mounted() {
};
},
mounted() {},
created() {
this.reportCode = this.$route.query.reportCode
this.accessKey = this.$route.query.accessKey
this.loadDataSet()
this.design()
this.reportCode = this.$route.query.reportCode;
this.accessKey = this.$route.query.accessKey;
this.loadDataSet();
this.design();
},
methods: {
handleClose() {
this.printVisible = false
},
handleChange(val) {
this.printVisible = false;
},
handleChange(val) {},
// 右侧信息配置tabs
handleClick(tab, event) {
},
handleClick(tab, event) {},
async design() {
// 根据reportCode获取单条报表
const {code, data} = await detailByReportCode(this.reportCode)
const { code, data } = await detailByReportCode(this.reportCode);
if (data != null) {
this.reportId = data.id
this.reportId = data.id;
}
this.sheetData = (data == null ? [{}] : JSON.parse(data.jsonStr))
console.log(this.sheetData)
this.sheetData = data == null ? [{}] : JSON.parse(data.jsonStr);
console.log(this.sheetData);
this.createSheet();
if (data != null) {
if (data.setCodes != null && data.setCodes !== '') {
var dataSetList = data.setCodes.split('|')
dataSetList.forEach((code) => {
this.dataSetData.forEach((setData) => {
if (data.setCodes != null && data.setCodes !== "") {
var dataSetList = data.setCodes.split("|");
dataSetList.forEach(code => {
this.dataSetData.forEach(setData => {
if (code === setData.setCode) {
this.detail(setData.id)
this.detail(setData.id);
}
})
})
});
});
}
}
},
//初始化表格
createSheet() {
//将vue对象传入
const that = this
const that = this;
const options = {
container: 'luckysheet', // 设定DOM容器的id
title: 'Luckysheet Demo', // 设定表格名称
lang: 'zh', // 设定表格语言
plugins: ['chart'],
container: "luckysheet", // 设定DOM容器的id
title: "Luckysheet Demo", // 设定表格名称
lang: "zh", // 设定表格语言
plugins: ["chart"],
hook: {
cellDragStop: function (cell, postion, sheetFile, ctx, event) {
cellDragStop: function(cell, postion, sheetFile, ctx, event) {
// console.info("cellDragStop-cell",cell);
// console.info("cellDragStop-postion", postion);
// console.info("cellDragStop-sheetFile", sheetFile);
// console.info("cellDragStop-ctx",ctx);
// console.info("cellDragStop-event", event);
// console.log("cellDragStop-draggableFieldLabel", that);
luckysheet.setCellValue(postion.r, postion.c, that.draggableFieldLabel)
},
cellMousedown: function (cell, postion, sheetFile, ctx) {
that.rightForm.coordinate = postion.r + "," + postion.c
that.rightForm.value = cell == null ? '' : cell.v;
luckysheet.setCellValue(
postion.r,
postion.c,
that.draggableFieldLabel
);
},
cellMousedown: function(cell, postion, sheetFile, ctx) {
that.rightForm.coordinate = postion.r + "," + postion.c;
that.rightForm.value = cell == null ? "" : cell.v;
}
},
data: [
{
"name": "report", //工作表名称
"color": "", //工作表颜色
"index": 0, //工作表索引
"status": 1, //激活状态
"order": 0, //工作表的下标
"hide": 0,//是否隐藏
"row": 36, //行数
"column": 18, //列数
"defaultRowHeight": 19, //自定义行高
"defaultColWidth": 73, //自定义列宽
"celldata": [], //初始化使用的单元格数据
"config": {
"merge": {}, //合并单元格
"rowlen": {}, //表格行高
"columnlen": {}, //表格列宽
"rowhidden": {}, //隐藏行
"colhidden": {}, //隐藏列
"borderInfo": {}, //边框
"authority": {}, //工作表保护
name: "report", //工作表名称
color: "", //工作表颜色
index: 0, //工作表索引
status: 1, //激活状态
order: 0, //工作表的下标
hide: 0, //是否隐藏
row: 36, //行数
column: 18, //列数
defaultRowHeight: 19, //自定义行高
defaultColWidth: 73, //自定义列宽
celldata: [], //初始化使用的单元格数据
config: {
merge: {}, //合并单元格
rowlen: {}, //表格行高
columnlen: {}, //表格列宽
rowhidden: {}, //隐藏行
colhidden: {}, //隐藏列
borderInfo: {}, //边框
authority: {} //工作表保护
},
"scrollLeft": 0, //左右滚动条位置
"scrollTop": 315, //上下滚动条位置
"luckysheet_select_save": [], //选中的区域
"calcChain": [],//公式链
"isPivotTable": false,//是否数据透视表
"pivotTable": {},//数据透视表设置
"filter_select": {},//筛选范围
"filter": null,//筛选配置
"luckysheet_alternateformat_save": [], //交替颜色
"luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
"luckysheet_conditionformat_save": {},//条件格式
"frozen": {}, //冻结行列配置
"chart": [], //图表配置
"zoomRatio": 1, // 缩放比例
"image": [], //图片
"showGridLines": 1, //是否显示网格线
"dataVerification": {} //数据验证配置
scrollLeft: 0, //左右滚动条位置
scrollTop: 315, //上下滚动条位置
luckysheet_select_save: [], //选中的区域
calcChain: [], //公式链
isPivotTable: false, //是否数据透视表
pivotTable: {}, //数据透视表设置
filter_select: {}, //筛选范围
filter: null, //筛选配置
luckysheet_alternateformat_save: [], //交替颜色
luckysheet_alternateformat_save_modelCustom: [], //自定义交替颜色
luckysheet_conditionformat_save: {}, //条件格式
frozen: {}, //冻结行列配置
chart: [], //图表配置
zoomRatio: 1, // 缩放比例
image: [], //图片
showGridLines: 1, //是否显示网格线
dataVerification: {} //数据验证配置
}
]
};
options.data = this.sheetData;
$(function () {
$(function() {
luckysheet.create(options);
});
},
onStart(setCode, evt) {
this.setCode = setCode
var fieldLabel = evt.item.innerText // 列名称
this.draggableFieldLabel = '#{' + this.setCode + '.' + fieldLabel + '}';
console.log("evt", evt)
this.setCode = setCode;
var fieldLabel = evt.item.innerText; // 列名称
this.draggableFieldLabel = "#{" + this.setCode + "." + fieldLabel + "}";
console.log("evt", evt);
console.log("draggableFieldLabel", this.draggableFieldLabel);
},
async loadDataSet() {
const {code, data} = await queryAllDataSet()
this.dataSetData = data
if (code != '200') return
const { code, data } = await queryAllDataSet();
this.dataSetData = data;
if (code != "200") return;
},
doCancel() {
this.pop = false
this.pop = false;
},
async save() {
// console.log(luckysheet.toJson())
// console.log(luckysheet.getAllSheets())
// console.log(luckysheet.getSheetData(0))
const jsonData = luckysheet.getAllSheets()
const jsonData = luckysheet.getAllSheets();
for (let i = 0; i < jsonData.length; i++) {
//清空data数据，以celldata数据为主
jsonData[i]['data'] = []
jsonData[i]["data"] = [];
}
this.reportExcelDto.jsonStr = JSON.stringify(luckysheet.getAllSheets())
var setCodeList = []
var setParams = {}
this.dataSet.forEach((code) => {
setCodeList.push(code.setCode)
if (code.dataSetParamDtoList != null && code.dataSetParamDtoList.length > 0) {
var dataSetParam = {}
code.dataSetParamDtoList.forEach((value) => {
dataSetParam[value.paramName] = value.sampleItem
})
setParams[code.setCode] = dataSetParam
this.reportExcelDto.jsonStr = JSON.stringify(luckysheet.getAllSheets());
var setCodeList = [];
var setParams = {};
this.dataSet.forEach(code => {
setCodeList.push(code.setCode);
if (
code.dataSetParamDtoList != null &&
code.dataSetParamDtoList.length > 0
) {
var dataSetParam = {};
code.dataSetParamDtoList.forEach(value => {
dataSetParam[value.paramName] = value.sampleItem;
});
setParams[code.setCode] = dataSetParam;
}
})
});
this.reportExcelDto.setParam = JSON.stringify(setParams)
this.reportExcelDto.setCodes = setCodeList.join('|')
this.reportExcelDto.reportCode = this.reportCode
this.reportExcelDto.setParam = JSON.stringify(setParams);
this.reportExcelDto.setCodes = setCodeList.join("|");
this.reportExcelDto.reportCode = this.reportCode;
if (this.reportId == null) {
const {code} = await addReportExcel(this.reportExcelDto)
if (code != '200') return
this.$message.success('保存成功')
const { code } = await addReportExcel(this.reportExcelDto);
if (code != "200") return;
this.$message.success("保存成功");
} else {
this.reportExcelDto.id = this.reportId
const {code} = await editReportExcel(this.reportExcelDto)
if (code != '200') return
this.$message.success('更新成功')
this.reportExcelDto.id = this.reportId;
const { code } = await editReportExcel(this.reportExcelDto);
if (code != "200") return;
this.$message.success("更新成功");
}
},
async detailByReportCode(reportCode) {
const {code, data} = await detailByReportCode(reportCode)
const { code, data } = await detailByReportCode(reportCode);
if (data != null) {
this.reportId = data.id
this.reportId = data.id;
}
},
async preview() {
var routeUrl = this.$router.resolve({path: '/excelreport/viewer', query: {reportCode: this.reportCode}})
window.open(routeUrl.href, '_blank')
var routeUrl = this.$router.resolve({
path: "/excelreport/viewer",
query: { reportCode: this.reportCode }
});
window.open(routeUrl.href, "_blank");
},
async queryAllDataSet() {
this.outerVisible = true
this.outerVisible = true;
},
handleSelectionChange(val) {
this.multipleSelection = val
this.multipleSelection = val;
},
checkDataSet() {
this.outerVisible = false
this.outerVisible = false;
if (this.multipleSelection.length > 1) {
this.$message({
message: '一次最多勾选一个数据集',
type: 'warning',
})
this.outerVisible = true
message: "一次最多勾选一个数据集",
type: "warning"
});
this.outerVisible = true;
} else {
this.detail(this.multipleSelection[0].id)
this.detail(this.multipleSelection[0].id);
}
},
async detail(id) {
const {code, data} = await detail(id)
if (code != 200) return
var flag = true
this.dataSet.forEach((value) => {
const { code, data } = await detail(id);
if (code != 200) return;
var flag = true;
this.dataSet.forEach(value => {
if (value.setCode === data.setCode) {
flag = false
flag = false;
}
})
});
if (flag) {
this.dataSet.push(data)
this.dataSet.push(data);
}
},
del(val) {
for (let i = 0; i < this.dataSet.length; i++) {
if (this.dataSet[i].setCode === val.setCode) {
this.dataSet.splice(i, 1)
this.dataSet.splice(i, 1);
}
}
},
},
}
}
}
};
</script>
<style src="../../../../../static/luckysheet/assets/iconfont/iconfont.css" />
<style scoped lang="scss">
.position {
position: absolute;

19
report-ui/static/luckysheet/assets/iconfont/iconfont.css
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save