|
|
@@ -55,7 +55,7 @@
|
|
|
label-width="60px"
|
|
|
>
|
|
|
<el-row>
|
|
|
- <el-col :span="8">
|
|
|
+ <el-col :span="6">
|
|
|
<el-form-item label="文件名称">
|
|
|
<el-select
|
|
|
filterable
|
|
|
@@ -73,7 +73,7 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="8">
|
|
|
+ <el-col :span="6">
|
|
|
<el-form-item label="文件分类">
|
|
|
<el-select
|
|
|
filterable
|
|
|
@@ -91,7 +91,7 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :span="8">
|
|
|
+ <el-col :span="6">
|
|
|
<el-form-item label="文件标签">
|
|
|
<el-select
|
|
|
filterable
|
|
|
@@ -110,6 +110,26 @@
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="展示模式">
|
|
|
+ <el-select
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ allow-create
|
|
|
+ v-model="filterForm.data.pattern"
|
|
|
+ placeholder="请选择数据展示模式,默认为表格"
|
|
|
+ style="width: 100%;"
|
|
|
+ @change="selectTrigger(filterForm.data.pattern)"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item,key) in nameObj.pattern.arr"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
@@ -195,7 +215,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="box-bottom">
|
|
|
+ <div v-if="!chart.show" class="box-bottom">
|
|
|
<el-form
|
|
|
size="mini"
|
|
|
ref="dialog_form_arr"
|
|
|
@@ -360,7 +380,10 @@
|
|
|
@current-change="getTableData()"
|
|
|
style="text-align: right;margin-top: 10px;"
|
|
|
></el-pagination>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="icore-graphical-index" v-if="chart.show" :style="indiviadualStyle">
|
|
|
+ <div class="icore-graphical-area" ref="graphical-area"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
@@ -369,6 +392,16 @@
|
|
|
destroy-on-close
|
|
|
width="90%"
|
|
|
top="10vh">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-download"
|
|
|
+ v-privilege="activeMenu + 'DOWNLOAD'"
|
|
|
+ @click="downloadFile(chart.fileData)"
|
|
|
+ :loading="loading"
|
|
|
+ style="position: absolute; right: 100px; top: 20px;"
|
|
|
+ >点击保存
|
|
|
+ </el-button>
|
|
|
<iframe :src="previewUrl" width="100%" :height="singleTableHeight"></iframe>
|
|
|
</el-dialog>
|
|
|
<el-dialog
|
|
|
@@ -540,6 +573,16 @@ export default {
|
|
|
name: 'DocumentClassification',
|
|
|
components: {
|
|
|
'zj-formulaEditor': formulaEditor
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: 1024
|
|
|
+ }
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -557,7 +600,8 @@ export default {
|
|
|
securityTag: '',
|
|
|
isprimary: '',
|
|
|
version: formatDate(new Date(), 'yyyyMM00'),
|
|
|
- fileName: ''
|
|
|
+ fileName: '',
|
|
|
+ pattern: 'table'
|
|
|
},
|
|
|
rules: {
|
|
|
|
|
|
@@ -599,6 +643,22 @@ export default {
|
|
|
securityTag: {
|
|
|
obj: {},
|
|
|
arr: []
|
|
|
+ },
|
|
|
+ pattern: {
|
|
|
+ obj: {
|
|
|
+ 'graphical': '图例',
|
|
|
+ 'table': '表格'
|
|
|
+ },
|
|
|
+ arr: [
|
|
|
+ {
|
|
|
+ id: 'graphical',
|
|
|
+ name: '图例'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'table',
|
|
|
+ name: '表格'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
loading: false,
|
|
|
@@ -649,11 +709,81 @@ export default {
|
|
|
qrRole: [],
|
|
|
userRoles: [],
|
|
|
dialogVisible: false,
|
|
|
- previewUrl: ''
|
|
|
+ previewUrl: '',
|
|
|
+ chart: {
|
|
|
+ show: false,
|
|
|
+ fileData: {
|
|
|
+ fileName: '',
|
|
|
+ fileUrl: ''
|
|
|
+ },
|
|
|
+ option: {
|
|
|
+ title: {
|
|
|
+ text: '文件一览图'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ triggerOn: 'mousemove'
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'tree',
|
|
|
+ data: [],
|
|
|
+ top: '2%',
|
|
|
+ left: '5%',
|
|
|
+ bottom: '1%',
|
|
|
+ right: '20%',
|
|
|
+ symbolSize: 8,
|
|
|
+ label: {
|
|
|
+ position: 'left',
|
|
|
+ verticalAlign: 'bottom',
|
|
|
+ lineHeight: 40,
|
|
|
+ align: 'right',
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ leaves: {
|
|
|
+ label: {
|
|
|
+ position: 'right',
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ align: 'left'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'descendant'
|
|
|
+ },
|
|
|
+ initialTreeDepth: 2,
|
|
|
+ expandAndCollapse: true,
|
|
|
+ animationDuration: 550,
|
|
|
+ animationDurationUpdate: 750,
|
|
|
+ roam: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
this.activeMenu = window.localStorage.getItem('activeMenu');
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ indiviadualStyle: function() {
|
|
|
+ return (
|
|
|
+ "width:" +
|
|
|
+ (typeof this.width === "string" &&
|
|
|
+ this.width.indexOf("%") !== -1
|
|
|
+ ? this.width
|
|
|
+ : parseFloat(this.width) + "px") +
|
|
|
+ ";height:" +
|
|
|
+ (typeof this.height === "string" &&
|
|
|
+ this.height.indexOf("%") !== -1
|
|
|
+ ? this.height
|
|
|
+ : parseFloat(this.height) + "px")
|
|
|
+ );
|
|
|
+ }
|
|
|
},
|
|
|
mounted () {
|
|
|
let that = this;
|
|
|
@@ -842,7 +972,8 @@ export default {
|
|
|
that.total = res.data.total;
|
|
|
} else {
|
|
|
that.$message.error(res.message);
|
|
|
- }
|
|
|
+ }
|
|
|
+ that.getFileTreeData ();
|
|
|
that.tableLoading = false;
|
|
|
}).catch(function () {
|
|
|
that.tableLoading = false;
|
|
|
@@ -1239,7 +1370,8 @@ export default {
|
|
|
},
|
|
|
preview (data) {
|
|
|
let that = this;
|
|
|
- that.loading = true;
|
|
|
+ that.loading = true;
|
|
|
+ that.chart.fileData = data;
|
|
|
let SubmitData = {
|
|
|
fileName: data.fileName,
|
|
|
fileUrl: data.fileUrl
|
|
|
@@ -1301,6 +1433,128 @@ export default {
|
|
|
that.$message.error('预览失败');
|
|
|
that.loading = false;
|
|
|
})
|
|
|
+ },
|
|
|
+ selectTrigger(val) {
|
|
|
+ let that = this;
|
|
|
+ if (val === 'graphical') {
|
|
|
+ that.listTopicTree.show = false;
|
|
|
+ that.chart.show = true;
|
|
|
+ that.loading = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ that.setGraphical();
|
|
|
+ }, 1000)
|
|
|
+ console.log(val);
|
|
|
+ } else {
|
|
|
+ that.chart.show = false;
|
|
|
+ that.listTopicTree.show = true;
|
|
|
+ console.log(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getFileTreeData () {
|
|
|
+ let that = this,
|
|
|
+ params = {
|
|
|
+ fileName: that.filterForm.data.fileName,
|
|
|
+ type: that.filterForm.data.securityTypeid,
|
|
|
+ fileType: that.filterForm.data.securityTag.toString()
|
|
|
+ };
|
|
|
+ that.tableLoading = true;
|
|
|
+ let url = 'pass/ems/v1/uploadfiles/getFileTree/?securityInfo=' + that.qrRole;
|
|
|
+ that.axios.get(url, {
|
|
|
+ params: params
|
|
|
+ })
|
|
|
+ .then(function (res) {
|
|
|
+ if (res.code === '0') {
|
|
|
+ let arr = [];
|
|
|
+ arr = that.treeDataUtil(res.data);
|
|
|
+ that.chart.option.series[0].data = arr;
|
|
|
+ that.setGraphical();
|
|
|
+ } else {
|
|
|
+ that.$message.error(res.message);
|
|
|
+ }
|
|
|
+ that.tableLoading = false;
|
|
|
+ }).catch(function () {
|
|
|
+ that.tableLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ treeDataUtil (treeData) {
|
|
|
+ let that = this;
|
|
|
+ let data = [];
|
|
|
+ let children = [];
|
|
|
+ let children1 = [];
|
|
|
+ let i = 0;
|
|
|
+ let name = '';
|
|
|
+ name = treeData[0].createMan;
|
|
|
+ for (let item of treeData) {
|
|
|
+ i++;
|
|
|
+ if(item.fileName === null) {
|
|
|
+ if (item.children !== null){
|
|
|
+ children = that.treeDataUtil(item.children);
|
|
|
+ };
|
|
|
+ data.push({
|
|
|
+ name: item.createMan,
|
|
|
+ children: children,
|
|
|
+ });
|
|
|
+ children = [];
|
|
|
+ } else {
|
|
|
+ if(name !== item.createMan) {
|
|
|
+ data.push({
|
|
|
+ name: name,
|
|
|
+ children: children1,
|
|
|
+ });
|
|
|
+ children1 = [];
|
|
|
+ name = item.createMan;
|
|
|
+ }
|
|
|
+ children1.push({
|
|
|
+ name: item.fileName,
|
|
|
+ value: item.fileUrl,
|
|
|
+ });
|
|
|
+ if ( i=== treeData.length ) {
|
|
|
+ data.push({
|
|
|
+ name: name,
|
|
|
+ children: children1,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 根据参数生成不同类型的图形化控件
|
|
|
+ */
|
|
|
+ setGraphical: function() {
|
|
|
+ let that = this;
|
|
|
+ // 引入 ECharts 主模块
|
|
|
+ let echarts = require("echarts");
|
|
|
+ require("echarts-gl");
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let myChart = echarts.init(this.$refs["graphical-area"]);
|
|
|
+ myChart.showLoading();
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption(that.chart.option);
|
|
|
+ // 设置树图的点击事件
|
|
|
+ myChart.on("click", function(param) {
|
|
|
+ // 老版本不支持
|
|
|
+ // if(param.event.target.culling === true){
|
|
|
+ // return
|
|
|
+ // } else if(param.event.target.culling === false){
|
|
|
+ // let args = {
|
|
|
+ // fileName: param.data.name,
|
|
|
+ // fileUrl: param.data.value
|
|
|
+ // } //当前节点及其子节点的值
|
|
|
+ // let level = param.data.level; //当前节点的层级 eg:"1-1-0",可以通过level判断当前的层级，从而进行不同的操作
|
|
|
+ // that.preview (args);
|
|
|
+ // }
|
|
|
+ if(param.data.value){
|
|
|
+ let args = {
|
|
|
+ fileName: param.data.name,
|
|
|
+ fileUrl: param.data.value
|
|
|
+ } //当前节点及其子节点的值
|
|
|
+ let level = param.data.level; //当前节点的层级 eg:"1-1-0",可以通过level判断当前的层级，从而进行不同的操作
|
|
|
+ that.preview (args);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ myChart.hideLoading();
|
|
|
+ that.loading = false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1405,6 +1659,15 @@ export default {
|
|
|
left: 530px;
|
|
|
top: -100px;
|
|
|
width: 200px;
|
|
|
+ }
|
|
|
+ .icore-graphical-index {
|
|
|
+ display: inline-block;
|
|
|
+ height: inherit;
|
|
|
+ width: inherit;
|
|
|
+ .icore-graphical-area {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
QuietShadow