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 | 916 ++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 716 insertions(+), 200 deletions(-) diff --git a/src/views/datamanage/dataStatistics.vue b/src/views/datamanage/dataStatistics.vue index 931cc01..39edf52 100644 --- a/src/views/datamanage/dataStatistics.vue +++ b/src/views/datamanage/dataStatistics.vue @@ -1,170 +1,255 @@ <template> - <div class="dataStatistics"> - <My-bread - :list="[ - `${$t('dataManage.dataManage')}`, - `${$t('dataManage.dataStatistics')}`, - ]" - ></My-bread> + <div class="box_div dataStatistics"> + <My-bread :list="[ + `${$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="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 class="iquery subpage_Div"> + <div class="content_Right subpage_Div" style="border: 1px solid #dcdfe6;"> + <div class=" subpage_Div iquery" style="padding-bottom: 14px"> <div> - <el-button - icon="el-icon-c-scale-to-original" - size="small" - type="warning" - @click="setCountFlagChange(1)" - >鎶ヨ〃</el-button - > - <el-button - icon="el-icon-pie-chart" - size="small" - type="primary" - @click="setCountFlagChange(2)" - >鏌辩姸鍥�</el-button - > - <el-button - icon="el-icon-download" - size="small" - type="success" - @click="setCountFlagChange(3)" - >涓嬭浇</el-button - > + + <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="dividing-line"></div> <div class="contentTable subpage_Div" v-show="setCountFlag"> - <el-table - :data="tableData" - 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 :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 - v-if="queryData.value == 'countServices'" - prop="count" - key="2" - align="center" - :label="$t('dataManage.dataStaticObj.type2')" - > + <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 - v-if="queryData.value == 'countSizes'" - prop="m1" - key="3" - align="center" - :label="$t('dataManage.dataStaticObj.type3')" - > + <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="count" - key="4" - align="center" - :label="$t('dataManage.dataStaticObj.type4')" - :formatter="formatterColumn" - > + <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 == 'countOperates'" - prop="m1" - key="5" - align="center" - :label="$t('dataManage.dataStaticObj.type5')" - > + <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 == 'countOperates'" - prop="count" - key="6" - align="center" - :label="$t('dataManage.dataStaticObj.type7')" - > + <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 == 'countOperates'" - prop="m2" - align="center" - :label="$t('dataManage.dataStaticObj.type6')" - > - </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 - id="contentEchart subpage_Div" - class="contentTable" - v-show="!setCountFlag" - > + <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" - > + <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 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 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 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"> @@ -176,11 +261,7 @@ </el-table> </div> </el-dialog> - <iframe - id="Iframe1" - src="" - style="display: none; border: 0; padding: 0; height: 0; width: 0" - ></iframe> + <iframe id="Iframe1" src="" style="display: none; border: 0; padding: 0; height: 0; width: 0"></iframe> </div> </template> @@ -195,33 +276,45 @@ 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: [], - }, - ], + ], + tjlxData: { + region: 'sjccl', + flag: false, + }, defaultProps: { children: "children", label: "label", @@ -236,25 +329,99 @@ 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: { - formatterColumn(row, column, cellValue, index) { - return row.count + "MB"; + 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]) + } + + } + var obj = this.getTreeData(std); + + this.treeData = obj + + this.setStartDataCount(); + + setStartDataCount }, + 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 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛� + // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� + }); + } else { + this.$message({ + message: '鏆傛棤鑿滃崟鏍忔暟鎹�', + type: 'warning' + }); + } + }, + setTjlxDataChange() { + this.showCountEchart() + }, + formatterColumn(row, column, cellValue, index) { + if (row.sizes >= 1024) { + return (row.sizes / 1024).toFixed(3) + "GB" + } else { + return (row.sizes).toFixed(3) + "MB" + } + }, + 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; + rows.id + obj; $("#Iframe1").attr("src", url).click(); }, @@ -277,15 +444,46 @@ this.closeDownLoadFlag(); done(); }) - .catch((_) => {}); + .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: @@ -299,6 +497,7 @@ } }, async getQueryDownloadData() { + this.modelData = []; this.listData = { pageIndex: 1, pageSize: 10, @@ -314,6 +513,30 @@ 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"); @@ -321,8 +544,8 @@ 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"; + dom.style.width = window.innerWidth * 0.75 + "px"; + dom.style.height = window.innerHeight * 0.75 + "px"; }; //璁剧疆div瀹瑰櫒楂樺 resizeMainContainer(); @@ -333,27 +556,133 @@ 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; + 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虏" } - data.push(this.tableData[i].count); - var m1 = this.tableData[i].m1; - if (this.tableData[i].m2 != null) { - m1 += "_" + this.tableData[i].m2; + } 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; } - dataAxis.push(m1); + 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%", @@ -364,13 +693,68 @@ tooltip: { //鎻愮ず妗嗙粍浠� trigger: "axis", //鍧愭爣杞磋Е鍙戯紝涓昏鍦ㄦ煴鐘跺浘锛屾姌绾垮浘绛変細浣跨敤绫荤洰杞寸殑鍥捐〃涓娇鐢� - axisPointer: { animation: false }, + // axisPointer: { animation: false }, axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥 type: "line", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow' }, - formatter: " {b} : <br/>缁熻閲� : {c}", + 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, @@ -387,6 +771,7 @@ z: 10, }, yAxis: { + name: name, axisLine: { show: false, }, @@ -426,16 +811,18 @@ }, ], }; + + + // 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) + Math.min(params.dataIndex + zoomSize / 2, data.length - 1) ], }); }); @@ -455,36 +842,152 @@ }); 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(); }, + handleIsopenSelect() { + this.$forceUpdate() + }, + async setPrjCuntChange() { + const data = await dataCount_countVariousDataByPrj({ code: this.prjCunt }) + if (!data || data.code != 200) { + return; + } + this.tableData = data.result; + this.prjData = data.result; + this.showCountEchart(); + }, //鏌ヨ缁熻淇℃伅 async setQueryCountData() { - var data; + 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(); } - if (data.code != 200) { + 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") { + // 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) { - data.result[i].count = data.result[i].sizes; + 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(); }); @@ -496,44 +999,57 @@ <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%; + //padding: 1%; border-radius: 5px; display: flex; justify-content: flex-end; + padding: 0px !important; } + .contentTable { width: 98%; height: 82%; padding: 1%; border-radius: 5px; - margin-top: 1%; + + //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; + } } } -- Gitblit v1.9.3