From 307aad8273b6419d4f339744908d51f4459ecce3 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 21 二月 2023 18:34:02 +0800
Subject: [PATCH] 数据统计页面下载,三维叠加wms地图服务修改，数据上传，源数据管理添加元数据查询功能及界面
---
src/views/datamanage/dataStatistics.vue | 455 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 312 insertions(+), 143 deletions(-)
diff --git a/src/views/datamanage/dataStatistics.vue b/src/views/datamanage/dataStatistics.vue
index 92e16ae..e1df49b 100644
--- a/src/views/datamanage/dataStatistics.vue
+++ b/src/views/datamanage/dataStatistics.vue
@@ -1,11 +1,13 @@
<template>
<div class="dataStatistics">
- <My-bread :list="[
+ <My-bread
+ :list="[
`${$t('dataManage.dataManage')}`,
- `${$t('dataManage.projectManage')}`,
- ]"></My-bread>
+ `${$t('dataManage.dataStatistics')}`,
+ ]"
+ ></My-bread>
<el-divider />
- <div class="contentBox ">
+ <div class="contentBox">
<div class="content_Left subpage_Div">
<el-tree
:data="treeData"
@@ -27,12 +29,13 @@
icon="el-icon-pie-chart"
@click="setCountFlagChange(2)"
></el-button>
+ <el-button
+ icon="el-icon-download"
+ @click="setCountFlagChange(3)"
+ ></el-button>
<el-divider />
</div>
- <div
- class="contentTable"
- v-show="setCountFlag"
- >
+ <div class="contentTable" v-show="setCountFlag">
<el-table
:data="tableData"
style="width: 100%"
@@ -40,17 +43,20 @@
>
<el-table-column
prop="m1"
- label="涓�绾фā鍧�"
+ align="center"
+ :label="$t('dataManage.dataStaticObj.type1')"
>
</el-table-column>
<el-table-column
prop="m2"
- label="浜岀骇妯″潡"
+ align="center"
+ :label="$t('dataManage.dataStaticObj.type2')"
>
</el-table-column>
<el-table-column
prop="count"
- label="缁熻鏁伴噺"
+ align="center"
+ :label="$t('dataManage.dataStaticObj.type3')"
>
</el-table-column>
</el-table>
@@ -67,157 +73,156 @@
</el-pagination>
</div> -->
</div>
- <div
-
- class="contentTable"
- v-show="!setCountFlag"
- >
- <div id="countEchart" style = "width:100%;height:100%; ">
-
- </div>
-
-
-
+ <div id="contentEchart" class="contentTable" v-show="!setCountFlag">
+ <div id="chart_11"></div>
</div>
-
</div>
-
</div>
+ <el-dialog
+ title="妯℃澘"
+ :visible.sync="showDownLoadFlag"
+ width="50%"
+ :before-close="handleClose"
+ >
+ <div style="height: 50vh">
+ <el-table
+ ref="singleTable"
+ :data="modelData"
+ height="calc(100% - 10px)"
+ style="width: 100%"
+ >
+ <el-table-column
+ type="index"
+ :label="$t('common.index')"
+ align="center"
+ width="70"
+ >
+ </el-table-column>
+ <el-table-column
+ align="center"
+ property="fname"
+ :label="$t('common.fileNme')"
+ >
+ </el-table-column>
+ <el-table-column
+ property="type"
+ :label="$t('common.format')"
+ align="center"
+ :formatter="showFormat"
+ >
+ </el-table-column>
+ <el-table-column width="120" :label="$t('common.operate')">
+ <template slot-scope="scope">
+ <el-button @click="setDownLoadRow(scope.row)" size="small">
+ {{ $t("common.download") }}
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-dialog>
+ <iframe
+ id="Iframe1"
+ src=""
+ style="display: none; border: 0; padding: 0; height: 0; width: 0"
+ ></iframe>
</div>
</template>
<script>
-import * as echarts from 'echarts';
+import $ from "jquery";
+import * as echarts from "echarts";
import MyBread from "../../components/MyBread.vue";
-import { dataCount_selectByPageAndCount, dataCount_selectCountOperates } from '../../api/api.js'
+import { getToken } from "@/utils/auth";
+import {
+ dataCount_selectByPageAndCount,
+ dataCount_selectCountOperates,
+ dataCount_selectCountServices,
+ dataCount_selectCountSizes,
+ dataCount_downloadReport,
+} from "../../api/api.js";
export default {
name: "DataStatistics",
components: { MyBread },
data() {
return {
- treeData: [{
- id: 1,
- label: '鏈嶅姟璋冪敤閲忕粺璁�',
- value: 'countServices',
- children: []
- }, {
- id: 2,
- label: '鏁版嵁閲忕粺璁�',
- value: 'countSizes',
- children: []
- }, {
- id: 3,
- label: '鐢ㄦ埛娴侀噺缁熻',
- value: 'countOperates',
- children: []
- }],
+ treeData: [
+ {
+ id: 1,
+ label: "鏈嶅姟璋冪敤閲忕粺璁�",
+ value: "countServices",
+ children: [],
+ },
+ {
+ id: 2,
+ label: "鏁版嵁閲忕粺璁�",
+ value: "countSizes",
+ children: [],
+ },
+ {
+ id: 3,
+ label: "鐢ㄦ埛娴侀噺缁熻",
+ value: "countOperates",
+ children: [],
+ },
+ ],
defaultProps: {
- children: 'children',
- label: 'label'
+ children: "children",
+ label: "label",
},
listData: {
pageIndex: 1,
pageSize: 10,
- code: '',
- name: '',
+ code: "",
+ name: "",
count: 0,
},
tableData: [],
+ modelData: [],
queryData: null,
setCountFlag: true,
-
- }
+ option: null,
+ showDownLoadFlag: false,
+ };
},
mounted() {
this.setStartDataCount();
},
methods: {
- //Echart鍥捐〃鏄剧ず
- showCountEchart(){
-
- var chartDom = document.getElementById('countEchart');
-var myChart = echarts.init(chartDom);
-var option;
- var dataAxis=[];
- var data=[];
- var yMax =0;
- let dataShadow = [];
- for(var i in this.tableData){
- if( this.tableData[i].count >yMax){
- yMax= this.tableData[i].count
- }
- data.push(this.tableData[i].count)
- }
- yMax = yMax+100;
-for (let i = 0; i < data.length; i++) {
- dataShadow.push(yMax);
-}
-option = {
-
- xAxis: {
- data: dataAxis,
- axisLabel: {
- color: '#000000'
- },
-
- axisLine: {
- show: true
- },
- z: 10
- },
- yAxis: {
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#999'
- }
- },
- dataZoom: [
- {
- type: 'inside'
- }
- ],
- series: [
- {
- type: 'bar',
- showBackground: true,
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#83bff6' },
- { offset: 0.5, color: '#188df0' },
- { offset: 1, color: '#188df0' }
- ])
- },
- emphasis: {
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#2378f7' },
- { offset: 0.7, color: '#2378f7' },
- { offset: 1, color: '#83bff6' }
- ])
- }
- },
- data: data
- }
- ]
-};
-// Enable data zoom when user click bar.
-const zoomSize = 6;
-myChart.on('click', function (params) {
-
- myChart.dispatchAction({
- type: 'dataZoom',
- startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
- endValue:
- dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
- });
-});
+ setDownLoadRow(rows) {
+ var url =
+ BASE_URL +
+ "/dataCount/downloadReport?token=" +
+ getToken() +
+ "&id=" +
+ rows.id;
+ $("#Iframe1").attr("src", url).click();
+ },
+ showFormat(row, column, cellValue, index) {
+ if (cellValue) {
+ switch (cellValue) {
+ case "1":
+ return "World";
+ break;
+ case "2":
+ return "Excel";
+ break;
+ }
+ }
+ return " ";
+ },
+ handleClose() {
+ this.$confirm("纭鍏抽棴锛�")
+ .then((_) => {
+ this.closeDownLoadFlag();
+ done();
+ })
+ .catch((_) => {});
+ },
+ closeDownLoadFlag() {
+ this.showDownLoadFlag = false;
},
//缁熻鍒囨崲
setCountFlagChange(res) {
@@ -228,14 +233,167 @@
case 2:
this.setCountFlag = false;
this.showCountEchart();
- break;
+ break;
+ case 3:
+ this.showDownLoadFlag = true;
+ this.getQueryDownloadData();
+ break;
}
},
+ async getQueryDownloadData() {
+ this.listData = {
+ pageIndex: 1,
+ pageSize: 10,
+ code: this.queryData.value,
+ name: "",
+ count: 0,
+ };
+ const data = await dataCount_selectByPageAndCount(this.listData);
+ if (data.code != 200) {
+ return;
+ }
+
+ this.modelData = data.result;
+ this.listData.count = data.count;
+ },
+ //Echart鍥捐〃鏄剧ず
+ showCountEchart() {
+ var dom = document.getElementById("chart_11");
+ if (this.option != null) {
+ dom.removeAttribute("_echarts_instance_"); // 绉婚櫎瀹瑰櫒涓婄殑 _echarts_instance
+ }
+ var resizeMainContainer = function () {
+ dom.style.width = window.innerWidth * 0.65 + "px";
+ dom.style.height = window.innerHeight * 0.6 + "px";
+ };
+ //璁剧疆div瀹瑰櫒楂樺
+ resizeMainContainer();
+ var myChart = echarts.init(dom, null, {
+ renderer: "canvas",
+ useDirtyRect: false,
+ });
+
+ var app = {};
+ let dataAxis = [];
+
+ let data = [];
+ let yMax = 0;
+ for (var i in this.tableData) {
+ if (this.tableData[i].count > yMax) {
+ yMax = this.tableData[i].count;
+ }
+
+ data.push(this.tableData[i].count);
+ var m1 = this.tableData[i].m1;
+ if (this.tableData[i].m2 != null) {
+ m1 += "_" + this.tableData[i].m2;
+ }
+ dataAxis.push(m1);
+ }
+
+ yMax = yMax + 10;
+ let dataShadow = [];
+ for (let i = 0; i < data.length; i++) {
+ dataShadow.push(yMax);
+ }
+ this.option = {
+ grid: {
+ left: "5%",
+ right: "5%",
+ bottom: "5%",
+ top: "10px",
+ },
+ tooltip: {
+ //鎻愮ず妗嗙粍浠�
+ trigger: "axis", //鍧愭爣杞磋Е鍙戯紝涓昏鍦ㄦ煴鐘跺浘锛屾姌绾垮浘绛変細浣跨敤绫荤洰杞寸殑鍥捐〃涓娇鐢�
+ axisPointer: { animation: false },
+ axisPointer: {
+ // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: "line", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ },
+
+ formatter: " {b} : <br/>缁熻閲� : {c}",
+ },
+ xAxis: {
+ data: dataAxis,
+ axisLabel: {
+ inside: false,
+ color: "#999",
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ z: 10,
+ },
+ yAxis: {
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#999",
+ },
+ },
+ dataZoom: [
+ {
+ type: "inside",
+ },
+ ],
+ series: [
+ {
+ type: "bar",
+ showBackground: true,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#83bff6" },
+ { offset: 0.5, color: "#188df0" },
+ { offset: 1, color: "#188df0" },
+ ]),
+ },
+ emphasis: {
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: "#2378f7" },
+ { offset: 0.7, color: "#2378f7" },
+ { offset: 1, color: "#83bff6" },
+ ]),
+ },
+ },
+ data: data,
+ },
+ ],
+ };
+ // Enable data zoom when user click bar.
+ const zoomSize = 6;
+ myChart.on("click", function (params) {
+ console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
+ myChart.dispatchAction({
+ type: "dataZoom",
+ startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
+ endValue:
+ dataAxis[
+ Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
+ ],
+ });
+ });
+
+ if (this.option && typeof this.option === "object") {
+ myChart.setOption(this.option);
+ }
+
+ window.addEventListener("resize", myChart.resize);
+ },
+
//绯荤粺鍒濆鍖�
setStartDataCount() {
this.queryData = this.treeData[0];
this.$nextTick(() => {
- this.$refs.tree.setCurrentKey(this.queryData.id) // 榛樿閫変腑鑺傜偣绗竴涓�
+ this.$refs.tree.setCurrentKey(this.queryData.id); // 榛樿閫変腑鑺傜偣绗竴涓�
});
this.listData.code = this.queryData.value;
this.setQueryCountData();
@@ -251,17 +409,28 @@
},
//鏌ヨ缁熻淇℃伅
async setQueryCountData() {
- const data = await dataCount_selectCountOperates();
+ var data;
+ if (this.queryData.value == "countServices") {
+ data = await dataCount_selectCountServices();
+ } else if (this.queryData.value == "countSizes") {
+ data = await dataCount_selectCountSizes();
+ } else if (this.queryData.value == "countOperates") {
+ data = await dataCount_selectCountOperates();
+ }
if (data.code != 200) {
- return
+ return;
+ }
+
+ if (this.queryData.value == "countSizes") {
+ for (var i in data.result) {
+ data.result[i].count = data.result[i].sizes;
+ }
}
this.tableData = data.result;
- this.listData.count = data.count
-
+ // this.listData.count = data.count;
},
-
- }
-}
+ },
+};
</script>
<style lang="less" scoped>
@@ -287,9 +456,9 @@
padding: 1%;
.contentTable {
width: 100%;
- height: 88%;
+ height: 84%;
}
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3