From 98a2b24c89e81a5aacdcbd6b739fef422adf17dd Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期五, 29 三月 2024 09:57:55 +0800
Subject: [PATCH] 代码更新
---
src/views/datamanage/dataStatistics.vue | 1153 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 958 insertions(+), 195 deletions(-)
diff --git a/src/views/datamanage/dataStatistics.vue b/src/views/datamanage/dataStatistics.vue
index 92e16ae..39edf52 100644
--- a/src/views/datamanage/dataStatistics.vue
+++ b/src/views/datamanage/dataStatistics.vue
@@ -1,295 +1,1058 @@
<template>
- <div class="dataStatistics">
+ <div class="box_div dataStatistics">
<My-bread :list="[
- `${$t('dataManage.dataManage')}`,
- `${$t('dataManage.projectManage')}`,
- ]"></My-bread>
+ `${$t('dataManage.dataManage')}`,
+ `${$t('dataManage.dataStatistics')}`,
+ ]"></My-bread>
<el-divider />
- <div class="contentBox ">
- <div class="content_Left subpage_Div">
- <el-tree
- :data="treeData"
- @node-click="handleNodeClick"
- node-key="id"
- ref="tree"
- highlight-current
- :props="defaultProps"
- >
+ <div class="contentBox">
+ <div class="content_Left subpage_Div" style="border: 1px solid #dcdfe6;">
+ <el-tree :data="treeData" @node-click="handleNodeClick" node-key="id" ref="tree" highlight-current
+ :props="defaultProps" accordion>
</el-tree>
</div>
- <div class="content_Right subpage_Div">
- <div>
- <el-button
- icon="el-icon-c-scale-to-original"
- @click="setCountFlagChange(1)"
- ></el-button>
- <el-button
- icon="el-icon-pie-chart"
- @click="setCountFlagChange(2)"
- ></el-button>
- <el-divider />
+ <div class="content_Right subpage_Div" style="border: 1px solid #dcdfe6;">
+ <div class=" subpage_Div iquery" style="padding-bottom: 14px">
+ <div>
+
+ <el-form :inline="true" :model="tjlxData" class="demo-form-inline">
+ <el-form-item label="缁熻绫诲瀷" v-show="!setCountFlag && tjlxData.flag">
+ <el-select v-model="tjlxData.region" size="small" @change="setTjlxDataChange">
+
+ <el-option label="鏁版嵁瀛樺偍閲�" value="sjccl">
+ </el-option>
+ <el-option label="鏂囦欢涓暟" v-show="queryData.value != 'countExplorationPoints'" value="sjts">
+ </el-option>
+ <el-option label="鏁伴噺" v-show="queryData.value == 'countExplorationPoints'" value="sjts">
+ </el-option>
+ </el-select>
+
+ </el-form-item>
+ <el-form-item v-show="!setCountFlag && setExcelType" label="鎬昏:">
+ {{ dataVolume }}
+
+ </el-form-item>
+ <el-form-item v-show="setExcelType">
+ <el-button icon="el-icon-c-scale-to-original" size="small" type="warning"
+ @click="setCountFlagChange(1)">{{ $t("shuJuGuanLi.butten.Report") }}</el-button>
+ </el-form-item>
+ <el-form-item v-show="setExcelType">
+ <el-button icon="el-icon-pie-chart" size="small" type="primary" @click="setCountFlagChange(2)">{{
+ $t("shuJuGuanLi.butten.Histogram") }}</el-button>
+ </el-form-item>
+ <el-form-item v-show="!setExcelType">
+ <el-select v-model="prjCunt" size="small" @change="setPrjCuntChange" placeholder="">
+ <el-option v-for="item in prjOption" :key="item.id" :label="item.name" :value="item.code">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button icon="el-icon-download" size="small" type="success" @click="setCountFlagChange(3)">{{
+ $t("shuJuGuanLi.butten.Download") }}</el-button>
+ </el-form-item>
+ </el-form>
+
+ </div>
</div>
- <div
- class="contentTable"
- v-show="setCountFlag"
- >
- <el-table
- :data="tableData"
- style="width: 100%"
- height="calc(100% - 50px)"
- >
- <el-table-column
- prop="m1"
- label="涓�绾фā鍧�"
- >
+ <div class="dividing-line"></div>
+ <div class="contentTable subpage_Div" v-show="setCountFlag">
+ <el-table :data="reportFormsData" style="width: 100%" height="calc(100% - 1px)" ref="table">
+ <el-table-column v-if="queryData.value == 'countServices'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
</el-table-column>
- <el-table-column
- prop="m2"
- label="浜岀骇妯″潡"
- >
+ <el-table-column v-if="queryData.value == 'countServices'" :formatter="formatterColumn2" prop="count"
+ key="2" align="center" :label="$t('dataManage.dataStaticObj.type2')">
</el-table-column>
- <el-table-column
- prop="count"
- label="缁熻鏁伴噺"
- >
+ <el-table-column v-if="queryData.value == 'countSizes'" prop="m1" key="3" align="center"
+ :label="$t('dataManage.dataStaticObj.type3')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSizes'" prop="sizes" key="4" align="center"
+ :label="$t('dataManage.dataStaticObj.type4')" :formatter="formatterColumn">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSizes'" :formatter="formatterColumn3" prop="count" key="4"
+ align="center" :label="$t('dataManage.dataStaticObj.type8')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countOperates'" prop="m1" key="5" align="center"
+ :label="$t('dataManage.dataStaticObj.type5')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countOperates'" prop="count" :formatter="formatterColumn3"
+ key="6" align="center" :label="$t('dataManage.dataStaticObj.type7')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSizesByType'" prop="m1" key="3" align="center"
+ :label="$t('common.fileType')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSizesByType'" prop="sizes" key="4" align="center"
+ :label="$t('dataManage.dataStaticObj.type4')" :formatter="formatterColumn">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSizesByType'" prop="count" :formatter="formatterColumn3"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type8')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countSizesByPrj'" prop="m1" key="3" align="center"
+ :label="$t('dataManage.projectObj.projname')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSizesByPrj'" prop="sizes" key="4" align="center"
+ :label="$t('dataManage.dataStaticObj.type4')" :formatter="formatterColumn">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSizesByPrj'" prop="count" :formatter="formatterColumn3"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type8')">
+ </el-table-column>
+
+
+ <el-table-column v-if="queryData.value == 'countExplorationPoints'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countExplorationPoints'" prop="sizes" key="4" align="center"
+ :formatter="formatterColumn" :label="$t('dataManage.dataStaticObj.type4')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countExplorationPoints'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countWaterDamageByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countWaterDamageByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countUnstableSlopeByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countUnstableSlopeByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countLandSlideByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countLandSlideByPrj'" prop="count" :formatter="formatterColumn3"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countHighSteepSlopeByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countHighSteepSlopeByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countGroundCollapseByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countGroundCollapseByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countDebrisFlowByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countDebrisFlowByPrj'" prop="count" :formatter="formatterColumn3"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countCollapseByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countCollapseByPrj'" prop="count" :formatter="formatterColumn3"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countExplorationReportByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countExplorationReportByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countSurveyWorksiteByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countSurveyWorksiteByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countLasAreaByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countLasAreaByPrj'" prop="area" :formatter="formatterColumn4"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countOsgbAreaByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countOsgbAreaByPrj'" prop="area" :formatter="formatterColumn4"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countMptAreaByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countMptAreaByPrj'" prop="area" :formatter="formatterColumn4"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countDemAreaByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countDemAreaByPrj'" prop="area" :formatter="formatterColumn4"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countDomAreaByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countDomAreaByPrj'" prop="area" :formatter="formatterColumn4"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countDlgAreaByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countDlgAreaByPrj'" prop="area" :formatter="formatterColumn4"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countExplorationPointByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countExplorationPointByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countLineLength'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countLineLength'" prop="len" :formatter="formatterColumn5"
+ key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+
+ <el-table-column v-if="queryData.value == 'countGeoModelAreaByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countGeoModelAreaByPrj'" prop="area"
+ :formatter="formatterColumn4" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countGeologicHazardByPrj'" prop="m1" key="1" align="center"
+ :label="$t('dataManage.dataStaticObj.type1')">
+ </el-table-column>
+ <el-table-column v-if="queryData.value == 'countGeologicHazardByPrj'" prop="count"
+ :formatter="formatterColumn3" key="4" align="center" :label="$t('dataManage.dataStaticObj.type9')">
</el-table-column>
</el-table>
- <!-- <div class="pagination_box">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="listData.pageIndex"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="listData.pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="listData.count"
- >
- </el-pagination>
- </div> -->
</div>
- <div
-
- class="contentTable"
- v-show="!setCountFlag"
- >
- <div id="countEchart" style = "width:100%;height:100%; ">
-
- </div>
-
-
-
+ <div id="contentEchart subpage_Div" 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,
+ dataCount_countSizesByType,
+ dataCount_countSizesByPrj,
+ dataCount_countExplorationPoints,
+ dataCount_countWaterDamageByPrj,
+ dataCount_countUnstableSlopeByPrj,
+ dataCount_countLandSlideByPrj,
+ dataCount_countHighSteepSlopeByPrj,
+ dataCount_countGroundCollapseByPrj,
+ dataCount_countDebrisFlowByPrj,
+ dataCount_countCollapseByPrj,
+ dataCount_countExplorationReportByPrj,
+ dataCount_countSurveyWorksiteByPrj,
+ dataCount_countLasAreaByPrj,
+ dataCount_countOsgbAreaByPrj,
+ dataCount_countMptAreaByPrj,
+ dataCount_countDemAreaByPrj,
+ dataCount_countDomAreaByPrj,
+ dataCount_countDlgAreaByPrj,
+ dataCount_countExplorationPointByPrj,
+ dataCount_countLineLength,
+ dataCount_countGeoModelAreaByPrj,
+ dataCount_countGeologicHazardByPrj,
+ project_selectDirAll,
+ dataCount_countVariousDataByPrj
+
+} from "../../api/api.js";
+import dataStatistics from '@/components/js/dataStatistics.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: [
+ ],
+ tjlxData: {
+ region: 'sjccl',
+ flag: false,
+ },
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,
-
- }
+ setCountFlag: false,
+ option: null,
+ showDownLoadFlag: false,
+ setDownloadType: false,
+ dataVolume: null,
+ reportFormsData: [],
+ setExcelType: true,
+ prjOption: [],
+ prjCunt: null,
+ prjData: [],
+ };
},
mounted() {
- this.setStartDataCount();
+ this.setTreeDataStart();
+
},
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
+ setTreeDataStart() {
+ this.treeData = [];
+ var val = dataStatistics.statistics;
+ var std = [];
+ for (var i = 0; i < val.length; i++) {
+ if (val[i].isCount) {
+ std.push(val[i])
}
- 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'
+ var obj = this.getTreeData(std);
+
+ this.treeData = obj
+
+ this.setStartDataCount();
+
+ setStartDataCount
},
-
- axisLine: {
- show: true
+ getTreeData(source) {
+ let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+
+ if (cloneData.length != 0) {
+ return cloneData.filter((father) => {
+ // 寰幆鎵�鏈夐」
+ let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+ branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 a.c.d 涔熸槸=2锛�
+ // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋�
+ return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+ });
+ } else {
+ this.$message({
+ message: '鏆傛棤鑿滃崟鏍忔暟鎹�',
+ type: 'warning'
+ });
+ }
},
- z: 10
- },
- yAxis: {
- axisLine: {
- show: false
+ setTjlxDataChange() {
+ this.showCountEchart()
},
- axisTick: {
- show: false
+ formatterColumn(row, column, cellValue, index) {
+ if (row.sizes >= 1024) {
+ return (row.sizes / 1024).toFixed(3) + "GB"
+ } else {
+ return (row.sizes).toFixed(3) + "MB"
+ }
},
- 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' }
- ])
+ formatterColumn2(row) {
+ return row.count + "娆�"
+ },
+ formatterColumn3(row) {
+ return row.count + "涓�"
+ },
+ formatterColumn5(row) {
+ return row.len + "<span style='font-size:16px;'>km<span>"
+ },
+ formatterColumn4(row) {
+ if (row.area >= 1000000) {
+ return (row.area / 1000000).toFixed(3) + "<span style='font-size:16px;'>km虏<span>"
+ } else {
+ return (row.area).toFixed(3) + "<span style='font-size:16px; '>m虏<span>"
+ }
+ },
+
+ setDownLoadRow(rows) {
+ var obj = ''
+
+ if (this.queryData.value == "countVariousDataByPrj") {
+ obj = "&code=" + this.prjCunt
+ }
+ var url =
+ BASE_URL +
+ "/dataCount/downloadReport?token=" +
+ getToken() +
+ "&id=" +
+ rows.id + obj;
+
+ $("#Iframe1").attr("src", url).click();
+ },
+ showFormat(row, column, cellValue, index) {
+ if (cellValue) {
+ switch (cellValue) {
+ case "1":
+ return "World";
+ break;
+ case "2":
+ return "Excel";
+ break;
}
- },
- 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)]
- });
-});
+ }
+ return " ";
+ },
+ handleClose() {
+ this.$confirm("纭鍏抽棴锛�")
+ .then((_) => {
+ this.closeDownLoadFlag();
+ done();
+ })
+ .catch((_) => { });
+ },
+ closeDownLoadFlag() {
+ this.showDownLoadFlag = false;
+ },
+ getReportForms() {
+ this.reportFormsData = [];
+ var val = JSON.parse(JSON.stringify(this.tableData))[0];
+ var sizes = 0;
+ var count = 0;
+ var m1 = "鎬昏"
+ for (var i in this.tableData) {
+ sizes += this.tableData[i].sizes;
+ if (this.queryData.value == 'countDlgAreaByPrj' || this.queryData.value == 'countGeoModelAreaByPrj') {
+ count += this.tableData[i].area;
+ } else if (this.queryData.value == 'countLineLength') {
+ count += this.tableData[i].len;
+ } else {
+ count += this.tableData[i].count;
+ }
+ }
+ if (this.queryData.value == 'countDlgAreaByPrj' || this.queryData.value == 'countGeoModelAreaByPrj') {
+ val.area = count;
+ } else if (this.queryData.value == 'countLineLength') {
+ val.len = count;
+ } else {
+ val.count = count;
+ }
+ val.sizes = sizes;
+ val.m1 = m1;
+ this.reportFormsData = JSON.parse(JSON.stringify(this.tableData));
+ this.reportFormsData.push(val)
},
//缁熻鍒囨崲
setCountFlagChange(res) {
switch (res) {
case 1:
+
+ this.getReportForms();
this.setCountFlag = true;
break;
case 2:
this.setCountFlag = false;
this.showCountEchart();
- break;
+ break;
+ case 3:
+ this.showDownLoadFlag = true;
+ this.getQueryDownloadData();
+ break;
}
},
+ async getQueryDownloadData() {
+ this.modelData = [];
+ 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;
+ },
+ getEchartFormate(val) {
+ var obj = this.prjData.filter(res => {
+ if (res.m1 == val) {
+ return res;
+ }
+ })[0];
+ var message = "";
+ if (obj) {
+ if (obj.m2 == 'area') {
+ if (obj.area > 1000000) {
+ message = (obj.area / 1000000).toFixed(3) + "<span style='font-size:16px; '>km虏<span>";
+ } else {
+ message = obj.area + "<span style='font-size:16px; '>m虏<span>";
+ }
+
+ } else if (obj.m2 == 'count') {
+ message = obj.count + '涓�';
+ } else if (obj.m2 == 'len') {
+ message = obj.len + "<span style='font-size:16px;'>km<span>";
+ }
+ }
+ return message;
+
+ },
+ //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.75 + "px";
+ dom.style.height = window.innerHeight * 0.75 + "px";
+ };
+ //璁剧疆div瀹瑰櫒楂樺
+ resizeMainContainer();
+ var myChart = echarts.init(dom, null, {
+ renderer: "canvas",
+ useDirtyRect: false,
+ });
+
+ var app = {};
+ let dataAxis = [];
+ let yMax = 0;
+ this.option = {}
+ this.dataVolume = 0;
+ let data = [];
+ window.sjName = this.queryData.value
+ window.sjType = this.tjlxData.region
+
+ if (sjName == 'countDemAreaByPrj'
+ || sjName == 'countMptAreaByPrj'
+ || sjName == 'countOsgbAreaByPrj'
+ || sjName == 'countLasAreaByPrj'
+ || sjName == 'countDomAreaByPrj'
+ || sjName == 'countDlgAreaByPrj'
+ || sjName == 'countGeoModelAreaByPrj'
+
+ ) {
+ for (var i in this.tableData) {
+ if (this.tableData[i].count > yMax) {
+ yMax = this.tableData[i].area;
+ }
+ data.push(this.tableData[i].area);
+ var m1 = this.tableData[i].m1;
+ dataAxis.push(m1);
+ this.dataVolume += this.tableData[i].area;
+ }
+ if (parseFloat(this.dataVolume) >= 1000000) {
+ this.dataVolume = parseFloat(this.dataVolume / 1000000).toFixed(3) + "km虏";
+ } else {
+ this.dataVolume = this.dataVolume.toFixed(3) + "m虏"
+ }
+
+ } else if (sjName == 'countWaterDamageByPrj'
+ || sjName == 'countUnstableSlopeByPrj'
+ || sjName == 'countLandSlideByPrj'
+ || sjName == 'countHighSteepSlopeByPrj'
+ || sjName == 'countGroundCollapseByPrj'
+ || sjName == 'countDebrisFlowByPrj'
+ || sjName == 'countCollapseByPrj'
+ || sjName == 'countExplorationReportByPrj'
+ || sjName == 'countSurveyWorksiteByPrj'
+ || sjName == 'countExplorationPointByPrj'
+ || sjName == 'countGeologicHazardByPrj'
+ ) {
+
+ 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;
+ dataAxis.push(m1);
+ this.dataVolume += this.tableData[i].count;
+ }
+ this.dataVolume += "涓�"
+ } else if (sjName == 'countLineLength') {
+ for (var i in this.tableData) {
+ if (this.tableData[i].count > yMax) {
+ yMax = this.tableData[i].len;
+ }
+ data.push(this.tableData[i].len);
+ var m1 = this.tableData[i].m1;
+ dataAxis.push(m1);
+ this.dataVolume += this.tableData[i].len;
+ }
+ this.dataVolume = this.dataVolume.toFixed(3) +"km";
+ } else if (sjName == 'countServices' || sjName == 'countOperates') {
+ 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;
+ dataAxis.push(m1);
+ this.dataVolume += this.tableData[i].count;
+ }
+ this.dataVolume += "娆�"
+ } else if (sjName == 'countVariousDataByPrj') {
+ for (var i in this.tableData) {
+ var val = this.tableData[i].m2;
+ var obj = this.tableData[i][val];
+ if (val == 'area') {
+ if (obj > 1000000) {
+ obj = (obj / 1000000).toFixed(3)
+ }
+ }
+ data.push(obj);
+ var m1 = this.tableData[i].m1;
+ dataAxis.push(m1);
+ }
+ } else {
+
+ for (var i in this.tableData) {
+ if (this.tableData[i].count > yMax) {
+ yMax = this.tableData[i].count;
+ }
+ if (sjType == 'sjts') {
+ data.push(this.tableData[i].count);
+ this.dataVolume += this.tableData[i].count;
+ } else if (sjType == 'sjccl') {
+
+ this.dataVolume = this.dataVolume + this.tableData[i].sizes;
+ data.push(this.tableData[i].sizes);
+
+ }
+ var m1 = this.tableData[i].m1;
+ dataAxis.push(m1);
+ }
+ if (sjType == 'sjts') {
+ this.dataVolume += '涓�';
+ } else if (sjType == 'sjccl') {
+
+ if (parseFloat(this.dataVolume) >= 1024) {
+ this.dataVolume = (this.dataVolume / 1024).toFixed(3) + 'GB';
+ } else {
+ this.dataVolume = this.dataVolume.toFixed(3) + 'MB';
+ }
+
+ }
+ }
+
+ yMax = yMax + 10;
+ let dataShadow = [];
+
+ for (let i = 0; i < data.length; i++) {
+ dataShadow.push(yMax);
+ }
+ var that = this;
+ this.option = {
+ grid: {
+ left: "5%",
+ right: "5%",
+ bottom: "5%",
+ top: "10px",
+ },
+ tooltip: {
+ //鎻愮ず妗嗙粍浠�
+ trigger: "axis", //鍧愭爣杞磋Е鍙戯紝涓昏鍦ㄦ煴鐘跺浘锛屾姌绾垮浘绛変細浣跨敤绫荤洰杞寸殑鍥捐〃涓娇鐢�
+ // axisPointer: { animation: false },
+ axisPointer: {
+ // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: "line", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ },
+
+ formatter: function (params) {
+ var p_name = params[0].axisValue;
+ var p_val;
+ if (that.queryData.value == 'countServices' || that.queryData.value == 'countOperates') {
+ p_val = p_name + '<br/>璁块棶娆℃暟 锛�' + params[0].data + '娆�'
+
+ } else if (that.queryData.value == 'countDemAreaByPrj'
+ || that.queryData.value == 'countMptAreaByPrj'
+ || that.queryData.value == 'countOsgbAreaByPrj'
+ || that.queryData.value == 'countLasAreaByPrj'
+ || that.queryData.value == 'countDomAreaByPrj'
+ || that.queryData.value == 'countDlgAreaByPrj'
+ || that.queryData.value == 'countGeoModelAreaByPrj'
+ ) {
+ if (params[0].data >= 1000000) {
+ p_val = p_name + '<br/>' + (params[0].data / 1000000).toFixed(3) + "<span style='font-size:20px; '>km虏<span>"
+ } else {
+ p_val = p_name + '<br/>' + params[0].data.toFixed(3) + "<span style='font-size:20px; '>m虏<span>"
+ }
+ } else if (sjName == 'countLineLength') {
+ p_val = p_name + '<br/>璺濈:' + params[0].data.toFixed(3) + "<span style='font-size:16px;'>km<span>";
+ } else if (sjName == 'countWaterDamageByPrj'
+ || sjName == 'countUnstableSlopeByPrj'
+ || sjName == 'countLandSlideByPrj'
+ || sjName == 'countHighSteepSlopeByPrj'
+ || sjName == 'countGroundCollapseByPrj'
+ || sjName == 'countDebrisFlowByPrj'
+ || sjName == 'countCollapseByPrj'
+ || sjName == 'countExplorationReportByPrj'
+ || sjName == 'countDlgAreaByPrj'
+ || sjName == 'countExplorationPointByPrj'
+ || sjName == 'countGeologicHazardByPrj'
+ || sjName == 'countSurveyWorksiteByPrj'
+ ) {
+ p_val = p_name + '<br/>' + params[0].data + '涓�'
+ } else if (sjName == "countVariousDataByPrj") {
+ p_val = p_name + '<br/>' + that.getEchartFormate(p_name)
+ } else {
+ if (sjType == 'sjts') {
+ if (that.queryData.value != "countExplorationPoints") {
+ p_val = p_name + '<br/>鏂囦欢涓暟:' + params[0].data + '涓�'
+ } else if (that.queryData.value == "countExplorationPoints") {
+ p_val = p_name + '<br/>涓暟:' + params[0].data + '涓�'
+ }
+
+ } else {
+ if (params[0].data >= 1024) {
+ p_val = p_name + '<br/>鏁版嵁瀛樺偍閲�:' + (params[0].data / 1024).toFixed(3) + 'GB'
+ } else {
+ p_val = p_name + '<br/>鏁版嵁瀛樺偍閲�:' + params[0].data.toFixed(3) + 'MB'
+ }
+
+ }
+ }
+ return p_val;
+ },
+ },
+ xAxis: {
+ data: dataAxis,
+ axisLabel: {
+ inside: false,
+ color: "#999",
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ z: 10,
+ },
+ yAxis: {
+ name: name,
+ 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)
+ ],
+ });
+ });
+
+ 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();
+
},
//鏍戠偣鍑讳簨浠�
handleNodeClick(data, node, prop) {
- this.setCountFlag = true;
+ if (data.isMenu == false) return
+ this.prjCunt = "";
+ this.setCountFlag = false;
this.queryData = data;
this.listData.code = data.value;
this.listData.pageIndex = 1;
this.listData.pageSize = 10;
this.setQueryCountData();
},
- //鏌ヨ缁熻淇℃伅
- async setQueryCountData() {
- const data = await dataCount_selectCountOperates();
- if (data.code != 200) {
- return
+ handleIsopenSelect() {
+ this.$forceUpdate()
+ },
+ async setPrjCuntChange() {
+ const data = await dataCount_countVariousDataByPrj({ code: this.prjCunt })
+ if (!data || data.code != 200) {
+ return;
}
this.tableData = data.result;
- this.listData.count = data.count
-
+ this.prjData = data.result;
+ this.showCountEchart();
},
+ //鏌ヨ缁熻淇℃伅
+ async setQueryCountData() {
+ this.tjlxData.region = 'sjccl';
+ var data, val;
+ this.setDownloadType = true;
+ this.tjlxData.flag = true;
+ this.setExcelType = true;
+ if (this.queryData.value == "countServices") {
+ this.tjlxData.flag = false;
+ data = await dataCount_selectCountServices();
+ } else if (this.queryData.value == "countSizes") {
+ data = await dataCount_selectCountSizes();
+ } else if (this.queryData.value == "countOperates") {
+ this.tjlxData.flag = false;
+ data = await dataCount_selectCountOperates();
+ } else if (this.queryData.value == "countSizesByType") {
+ data = await dataCount_countSizesByType();
+ } else if (this.queryData.value == "countSizesByPrj") {
+ data = await dataCount_countSizesByPrj();
+ } else if (this.queryData.value == "countExplorationPoints") {
+ data = await dataCount_countExplorationPoints();
+ }
+ else if (this.queryData.value == "countWaterDamageByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countWaterDamageByPrj();
+ } else if (this.queryData.value == "countUnstableSlopeByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countUnstableSlopeByPrj();
+ } else if (this.queryData.value == "countLandSlideByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countLandSlideByPrj();
+ } else if (this.queryData.value == "countHighSteepSlopeByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countHighSteepSlopeByPrj();
+ } else if (this.queryData.value == "countGroundCollapseByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countGroundCollapseByPrj();
+ } else if (this.queryData.value == "countDebrisFlowByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countDebrisFlowByPrj();
+ } else if (this.queryData.value == "countCollapseByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countCollapseByPrj();
+ } else if (this.queryData.value == "countExplorationReportByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countExplorationReportByPrj();
+ } else if (this.queryData.value == "countSurveyWorksiteByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countSurveyWorksiteByPrj();
+ } else if (this.queryData.value == "countLasAreaByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countLasAreaByPrj();
+ } else if (this.queryData.value == "countOsgbAreaByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countOsgbAreaByPrj();
+ } else if (this.queryData.value == "countMptAreaByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countMptAreaByPrj();
+ } else if (this.queryData.value == "countDemAreaByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countDemAreaByPrj();
+ } else if (this.queryData.value == "countDomAreaByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countDomAreaByPrj();
+ } else if (this.queryData.value == "countDlgAreaByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countDlgAreaByPrj();
+ } else if (this.queryData.value == "countExplorationPointByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countExplorationPointByPrj();
+ } else if (this.queryData.value == "countLineLength") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countLineLength();
+ } else if (this.queryData.value == "countGeoModelAreaByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countGeoModelAreaByPrj();
+ } else if (this.queryData.value == "countGeologicHazardByPrj") {
+ this.tjlxData.flag = false;
+ data = await dataCount_countGeologicHazardByPrj();
+ } else if (this.queryData.value == "countVariousDataByPrj") {
+ this.setDownloadType = false;
+ this.tjlxData.flag = false;
+ this.setCountFlag = false;
+ this.setExcelType = false;
+ data = await project_selectDirAll();
+ if (!data || data.code != 200) {
+ return;
+ } else {
+ this.prjOption = [];
+ var val_std = [{
+ name: '鍏ㄩ儴',
+ code: "ALL",
+ }]
+ this.prjOption = val_std.concat(data.result);
+ this.prjCunt = this.prjOption[0].code
+ this.setPrjCuntChange();
+ return
+ }
+ }
- }
-}
+ if (!data || data.code != 200) {
+ return;
+ }
+
+ // if (this.queryData.value == "countSizes") {
+ // // for (var i in data.result) {
+ // // data.result[i].count = data.result[i].sizes;
+ // // }
+ // }
+
+ if (this.queryData.value == "countOperates") {
+ for (var i in data.result) {
+ if (data.result[i].m2) {
+ data.result[i].m1 = data.result[i].m1 + '\\' + data.result[i].m2
+ }
+
+ }
+ }
+
+ this.tableData = data.result;
+ this.showCountEchart();
+ this.$nextTick(() => {
+ this.$refs.table.doLayout();
+ });
+ // this.listData.count = data.count;
+ },
+ },
+};
</script>
<style lang="less" scoped>
.dataStatistics {
- height: 98%;
- width: 98%;
- padding: 1%;
+ width: calc(100% - 20px);
+ height: calc(100% - 20px);
+ padding: 10px;
+ position: relative;
+ overflow: hidden;
+
.contentBox {
- height: calc(98% - 63px);
+ padding-top: 10px;
+
+ height: calc(100% - 50px);
width: 100%;
display: flex;
justify-content: space-around;
+
.content_Left {
- width: 18%;
+ width: 15%;
height: calc(95% - 2px);
border-radius: 5px;
padding: 1%;
}
+
.content_Right {
- width: 77%;
+ width: 80%;
height: calc(95% - 2px);
border-radius: 5px;
padding: 1%;
+
+ .iquery {
+ //padding: 1%;
+ border-radius: 5px;
+ display: flex;
+ justify-content: flex-end;
+ padding: 0px !important;
+ }
+
.contentTable {
- width: 100%;
- height: 88%;
+ width: 98%;
+ height: 82%;
+ padding: 1%;
+ border-radius: 5px;
+
+ //margin-top: 1%;
+ .el-table,
+ .el-table /deep/ .el-table__expanded-cell {
+ background-color: transparent !important;
+ }
+
+ .el-table /deep/ th,
+ .el-table /deep/ tr {
+ background-color: transparent !important;
+
+ }
}
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3