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/css/pluginsCss.css' />
<link rel='stylesheet' href='./static/luckysheet/plugins/plugins.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/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/plugins/js/plugin.js"></script>
<script src="./static/luckysheet/luckysheet.umd.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-face {
font-family: "iconfont"; /* Project id 1513211 */ font-family: "iconfont"; /* Project id 1513211 */
src: url('iconfont.woff2?t=1629797734566') format('woff2'), src: url("iconfont.woff2?t=1629797734566") format("woff2"),
url('iconfont.woff?t=1629797734566') format('woff'), url("iconfont.woff?t=1629797734566") format("woff"),
url('iconfont.ttf?t=1629797734566') format('truetype'); url("iconfont.ttf?t=1629797734566") format("truetype");
} }
.iconfont { .iconfont {
@ -488,4 +488,3 @@
.iconjiantou-copy-copy:before { .iconjiantou-copy-copy:before {
content: "\e654"; content: "\e654";
} }

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

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