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

sheet

Browse Source
Raod 3 years ago
parent 2c79a61fa9
commit 4a004ca52d
3 changed files with 1 additions and 826 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,819 +0,0 @@
<!--
* @Author: lide1202@hotmail.com
* @Date: 2021-3-13 11:04:24
* @Last Modified by: lide1202@hotmail.com
* @Last Modified time: 2021-3-13 11:04:24
!-->
<template>
<div class="layout">
<div class="layout-left">
<div class="add-collection">
数据集管理
<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-popconfirm>
<draggable v-model="item.setParamList"
:sort="false"
group="people"
style="margin-left: 10px"
@start="onStart(item.setCode)"
@end="onEnd">
<!-- <transition-group> -->
<div v-for="(i, index) in item.setParamList"
:key="index"
class="field-container">
<div class="aRow">
<span>{{ i }}</span>
</div>
</div>
<!-- </transition-group> -->
</draggable>
</el-collapse-item>
</el-collapse>
</div>
</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()">
<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()">
<i class="iconfont iconsave"></i>
</el-button>
</el-tooltip>
</div>
<div id="x-spreadsheet-demo"
class="excel-designer" />
<div id="qrCode"
ref="qrCodeDiv"></div>
<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-form-item label="坐标">
<el-input v-model="rightForm.coordinate" />
</el-form-item>
<el-form-item label="值">
<el-input v-model="rightForm.value" />
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="二维码配置"
v-if="dialogVisible"
name="second">
<el-form ref="qrCodeForm"
:model="qrCodeForm"
label-width="60px">
<el-form-item label="二维码内容">
<el-input v-model="qrCodeForm.content" />
</el-form-item>
<el-form-item label="宽度">
<el-input v-model="qrCodeForm.width" />
</el-form-item>
<el-form-item label="高度">
<el-input v-model="qrCodeForm.height" />
</el-form-item>
<el-form-item label="前景色">
<ColorPicker v-model="qrCodeForm.colorDark"
@change="(val) => changed(val,qrCodeForm.colorDark)" />
</el-form-item>
<el-form-item label="背景色">
<ColorPicker v-model="qrCodeForm.colorLight"
@change="(val) => changed(val,qrCodeForm.colorLight)" />
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="条形码配置"
v-if="dialogBarCode"
name="second">
<el-form ref="barCodeForm"
:model="barCodeForm"
label-width="60px">
<el-form-item label="条形码内容">
<el-input v-model="barCodeForm.content" />
</el-form-item>
<el-form-item label="宽度">
<el-input v-model="barCodeForm.width" />
</el-form-item>
<el-form-item label="高度">
<el-input v-model="barCodeForm.height" />
</el-form-item>
<el-form-item label="前景色">
<ColorPicker v-model="barCodeForm.lineColor"
@change="(val) => changed(val,barCodeForm.lineColor)" />
</el-form-item>
<el-form-item label="背景色">
<ColorPicker v-model="barCodeForm.background"
@change="(val) => changed(val,barCodeForm.background)" />
</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%"
@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">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary"
@click="checkDataSet()">确定</el-button>
</div>
</el-dialog>
<el-dialog title="打印设置"
:visible.sync="printVisible"
width="30%"
:before-close="handleClose">
<el-form label-position="right"
label-width="90px"
:model="formPrintSetting">
<el-row>
<el-col :span="24">
<el-form-item label="纸张大小">
<el-select v-model="formPrintSetting.size"
placeholder="请选择打印尺寸"
@change="onPaperChange">
<el-option v-for="(item, index) in paperList"
:index="index"
:value="item.paper"
:label="getPaperText(item)"
:key="index">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="对应像素">
<el-input v-model="formPrintSetting.pixel1"
disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label=" "
label-width="12px">
<el-input v-model="formPrintSetting.pixel2"
disabled></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer"
class="dialog-footer">
<el-button @click="printVisible = false">取 消</el-button>
<el-button type="primary"
@click="getWindowDpi()">确定</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 "@/components/x-spreadsheet/dist/xspreadsheet.js"
import ColorPicker from "../../bigscreen/designer/form/colorPicker.vue"
import QRCode from 'qrcodejs2';
import JsBarcode from 'jsbarcode';
export default {
name: 'Excels',
components: {
draggable,
ColorPicker
},
data () {
return {
activeName: 'first',
activeNames: ['1'],
reportId: null,
accessKey: null,
reportCode: '',
options: {},
sheet: {},
dataSetData: [],
reportExcelDto: {
id: null,
jsonStr: '',
setCodes: '',
setParam: '',
reportCode: '',
},
multipleSelection: [],
rightForm: {
coordinate: '',
value: '',
},
qrCodeForm: {
type: "QRCode",
content: 'https://www.baidu.com',
width: 125,
height: 125,
colorDark: "#333333", //二维码颜色
colorLight: "#ffffff", //二维码背景色
correctLevel: QRCode.CorrectLevel.L,//容错率，L/M/H
ri: 0,
ci: 0,
currentSrc: '',
},
barCodeForm: {
type: "BarCode",
format: 'CODE39',
displayValue: true,
content: '99999999999',
lineColor: '#000',
background: '#fff',
width: 100,
height: 40,
ri: 0,
ci: 0,
currentSrc: '',
},
formPrintSetting: {
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 }
],
dataSet: [],
outerVisible: false,
printVisible: false,
pop: false,
setCode: null,
dialogVisible: false,
dialogBarCode: false,
paperList: [],
//纸张标识
paper: '',
// 纸张宽高
width: '',
height: '',
//清晰度
definition: '',
//是否套打
isBackend: '',
dpi: '',
pxWidth: '',
pxHeight: '',
show: false,
config: "",
settings: {},
qrCodeList: [],
moveDataelse: {
x: null,
y: null
}
}
},
mounted () {
this.options = {
mode: 'edit', // edit | read
// "uploadUrl": "/design/report/upload", //统一上传地址
// "viewLocalImage": "/design/report/img",//预览本地图片方法,//预览本地图片方法
showToolbar: true,
showGrid: true,
showContextmenu: true,
view: {
height: () => document.documentElement.clientHeight,
width: () => document.getElementsByClassName('layout-middle')[0].clientWidth,
},
row: {
len: 100,
height: 25,
},
col: {
len: 52,
width: 100,
indexWidth: 60,
minWidth: 60,
},
style: {
bgcolor: '#ffffff',
align: 'left',
valign: 'middle',
textwrap: false,
strike: false,
underline: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',
size: 10,
bold: false,
italic: false,
},
},
// 大屏画布中的组件
widgets: [{
// type和value最终存到数据库中去，保存到gaea_report_dashboard_widget中
type: 'widget-text',
value: {
setup: {},
data: {},
position: {
width: 100,
height: 100,
left: 0,
top: 0,
zIndex: 0,
},
},
// options属性是从工具栏中拿到的tools中拿到
options: [],
},
], // 工作区中拖放的组件
}
this.load()
},
created () {
this.reportCode = this.$route.query.reportCode
this.accessKey = this.$route.query.accessKey
this.loadDataSet()
this.design()
this.initPaperList()
this.getWindowDpi()
},
methods: {
handleClose () {
this.printVisible = false
},
handleChange (val) {
},
//右侧信息配置tabs
handleClick (tab, event) {
},
async design () {
// 根据reportCode获取单条报表
const { code, data } = await detailByReportCode(this.reportCode)
if (data != null) {
this.reportId = data.id
}
this.sheet.loadData(data == null ? [{}] : JSON.parse(data.jsonStr)['sheet'])
if (data != null) {
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)
}
})
})
}
}
},
async loadDataSet () {
const { code, data } = await queryAllDataSet()
this.dataSetData = data
if (code != '200') return
},
doCancel () {
this.pop = false
},
save () {
var sheetData = {}
sheetData['sheet'] = this.sheet.getData()
this.reportExcelDto.jsonStr = JSON.stringify(sheetData)
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
if (this.reportId == null) {
const res = addReportExcel(this.reportExcelDto)
} else {
this.reportExcelDto.id = this.reportId
const res = editReportExcel(this.reportExcelDto)
}
},
async detailByReportCode (reportCode) {
const { code, data } = await detailByReportCode(reportCode)
if (data != null) {
this.reportId = data.id
}
},
async preview () {
var routeUrl = this.$router.resolve({ path: '/report/excelreport/viewer', query: { reportCode: this.reportCode } })
window.open(routeUrl.href, '_blank')
},
async queryAllDataSet () {
this.outerVisible = true
},
handleSelectionChange (val) {
this.multipleSelection = val
},
checkDataSet () {
this.outerVisible = false
if (this.multipleSelection.length > 1) {
this.$message({
message: '一次最多勾选一个数据集',
type: 'warning',
})
this.outerVisible = true
} else {
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) => {
if (value.setCode === data.setCode) {
flag = false
}
})
if (flag) {
this.dataSet.push(data)
}
},
onStart (setCode) {
this.setCode = setCode
},
onEnd (evt) {
// 获取结束坐标和列名
var x = evt.originalEvent.clientX // 结束在屏幕的x坐标
var y = evt.originalEvent.clientY // 结束在屏幕的y坐标
var fieldLabel = evt.item.innerText // 列名称
var excelToolbarHeight = 40 // excel工具栏
var leftLayout = document.getElementsByClassName('layout-left')[0].clientWidth // 左侧宽度
// 计算行列
const { ri, ci } = this.sheet.datas[0].getCellRectByXY(x - leftLayout, y - excelToolbarHeight)
this.sheet.cellText(ri, ci, '#{' + this.setCode + '.' + fieldLabel + '}', 0)
// 设定值
this.sheet.reRender()
},
del (val) {
for (let i = 0; i < this.dataSet.length; i++) {
if (this.dataSet[i].setCode === val.setCode) {
this.dataSet.splice(i, 1)
}
}
},
// 无论哪个输入框改变 都需要触发事件 将值回传
changed (val, key) {
},
load () {
this.activeName = 'first';
const rows = {};
this.sheet = x_spreadsheet('#x-spreadsheet-demo', this.options)
.loadData([{}]).change((cdata) => {
});
this.sheet.on('cell-selected', (cell, ri, ci) => {
// console.log('cell:', cell, ', ri:', ri, ', ci:', ci);
}).on('cell-edited', (text, ri, ci) => {
// console.log('text:', text, ', ri: ', ri, ', ci:', ci);
});
this.sheet.on('generateQrcode', (cell, ri, ci) => {
let that = this;
that.dialogVisible = true;
that.dialogBarCode = false
let selector = cell.print.data.selector
// 生成二维码.
that.sheet.reRender()
this.$nextTick(() => {
setTimeout(function () {
new QRCode(that.$refs.qrCodeDiv, that.qrCodeForm);
}, 200)
})
this.$nextTick(() => {
setTimeout(function () {
that.qrCodeForm.currentSrc = document.getElementById("qrCode").getElementsByTagName("img")[0].src;
that.sheet.cellText(selector.ri, selector.ci, that.qrCodeForm).reRender()
}, 500)
})
});
this.sheet.on('generateBarcode', (cell) => {
let that = this;
let selector = cell.print.data.selector
// 生成条形码.
that.dialogBarCode = true;
that.dialogVisible = false;
that.sheet.reRender()
this.$nextTick(() => {
JsBarcode('#barCode', that.barCodeForm.content, that.barCodeForm)
})
this.$nextTick(() => {
setTimeout(function () {
that.barCodeForm.currentSrc = document.getElementById("barCode").src;
that.sheet.cellText(selector.ri, selector.ci, that.barCodeForm).reRender()
}, 500)
})
});
this.sheet.on('printSettings', () => {
this.printVisible = true;
// 打印设置.
});
this.sheet.on('insertImg', () => {
// 插入图片
});
},
testClick () {
console.log("sdsdsddsd")
},
// 获取回传的参数
getEmitParam () {
return {
paper: this.formPrintSetting.size,
width: this.formPrintSetting.width,
height: this.formPrintSetting.height,
isBackend: this.isBackend
}
},
// 纸张大小改变事件
onPaperChange (value) {
let arr = this.paperList.filter(item => {
return item.paper === value
})
this.resetForm(arr[0])
},
resetForm: function (param) {
if (param) {
this.paper = param.paper
this.width = param.width
this.height = param.height
this.formPrintSetting.pixel1 = this.getPxWidth(param.width) + 'px'
this.formPrintSetting.pixel2 = this.getPxHeight(param.height) + 'px'
if (param.definition) {
this.definition = param.definition
}
if (param.isBackend === true || param.isBackend === false) {
this.isBackend = param.isBackend
}
}
},
getPaperText (item) {
return item.paper + '：' + item.width + 'mm x ' + item.height + 'mm'
},
initPaperList () {
let printPaper = []
if (this.config) {
let config2 = JSON.parse(this.config)
if (config2 && config2['printPaper']) {
printPaper = config2['printPaper']
}
}
let arr = []
for (let item of this.pixelList) {
arr.push(item)
}
for (let item of printPaper) {
arr.push({
paper: item.title, width: item['size'][0], height: item['size'][1]
})
}
this.paperList = [...arr];
},
//获取窗口dpi
getWindowDpi () {
//25.41 1英寸=25.41mm 96是window默认dpi,mac:72
this.printVisible = false
let arrDPI = new Array();
if (window.screen.deviceXDPI != undefined) {
arrDPI[0] = window.screen.deviceXDPI;
arrDPI[1] = window.screen.deviceYDPI;
}
else {
let tmpNode = document.createElement("div");
tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
arrDPI[0] = parseInt(tmpNode.offsetWidth);
arrDPI[1] = parseInt(tmpNode.offsetHeight);
tmpNode.parentNode.removeChild(tmpNode);
}
this.dpi = [...arrDPI]
},
//获取像素宽
getPxWidth (width) {
let margin = 10
if (this.isBackend == true) {
margin = 0
}
return Math.ceil((width - margin * 2) / 25.41 * this.dpi[0]);
},
//获取像素高
getPxHeight (height) {
let margin = 10
if (this.isBackend == true) {
margin = 0
}
return Math.ceil((height - margin * 2) / 25.41 * this.dpi[1]);
}
},
}
</script>
<style scoped lang="scss">
@import '../../../../components/x-spreadsheet/dist/xspreadsheet.css';
.position {
position: absolute;
z-index: 100;
}
#qrCode,
#barCode {
display: none;
}
.yulancopy {
font-size: 16px;
}
.baocun {
font-size: 17px;
}
.el-collapse {
position: relative;
border-top: 0 solid #e6ebf5;
border-bottom: 0 solid #e6ebf5;
}
.el-collapse-item__header {
border-bottom: 0 solid #e6ebf5 !important;
}
.delect-all {
position: absolute;
top: 10px;
right: 30px;
color: #333;
}
.push_btn {
position: absolute;
z-index: 100;
top: 5px;
left: 3px;
.iconfont {
color: black;
}
}
.add-collection {
line-height: 30px;
.el-button {
font-size: 16px !important;
vertical-align: middle;
margin-left: 20px;
}
}
.layout {
display: block;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #d7dde4;
}
.layout-left {
display: block;
position: absolute;
padding: 20px;
width: 230px;
min-height: 99.98vh;
border-right: 1px solid #eee;
border-color: #e8eaec;
background: #fff;
border-radius: 4px;
font-size: 14px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
top: 0;
left: 0;
.field-container {
display: block;
position: relative;
width: 100%;
margin: 0;
cursor: pointer;
line-height: 30px;
.aRow {
padding: 0 10px;
.operation {
float: right;
display: none;
.el-button--text {
color: #333 !important;
}
}
&:hover {
.operation {
display: block;
}
background: #f7fafd;
}
}
}
}
.layout-middle {
display: block;
position: absolute;
left: 230px;
right: 230px;
width: calc(100% - 460px);
margin: 0;
padding: 0;
.excel-designer {
display: block;
position: relative;
margin: 0;
padding: 0;
}
}
.layout-right {
display: block;
position: absolute;
top: 0;
right: 0;
padding: 20px;
width: 230px;
min-height: 99.98vh;
border-left: 1px solid #dcdee2;
border-color: #e8eaec;
background: #fff;
border-radius: 4px;
font-size: 14px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
</style>

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

@ -709,7 +709,6 @@ export default {
</script>
<style scoped lang="scss">
@import '../../../../components/x-spreadsheet/dist/xspreadsheet.css';
.position {
position: absolute;
z-index: 100;

7
report-ui/src/views/report/excelreport/viewer/index.vue
Unescape Escape View File

@ -51,12 +51,7 @@
</template>
<script>
// import Spreadsheet from 'x-data-spreadsheet'
// import zhCN from 'x-data-spreadsheet/src/locale/zh-cn'
import { preview, exportExcel } from '@/api/GaeaReport'
import { addReport, editReport } from '@/api/report'
import '@/components/x-spreadsheet/dist/xspreadsheet.js'
// Spreadsheet.locale('zh-cn', zhCN)
export default {
name: 'Login',
@ -197,7 +192,7 @@ export default {
]
};
options.data = this.sheetData;
console.log(this.sheetData)
// console.log(this.sheetData)
$(function () {
luckysheet.create(options);
});

Write Preview
Loading…
Cancel
Save