| | |
| | | <template> |
| | | <div class="box_div dataStatistics"> |
| | | <My-bread :list="[ |
| | | `${$t('dataManage.dataManage')}`, |
| | | `${$t('dataManage.dataStatistics')}`, |
| | | ]"></My-bread> |
| | | `${$t('dataManage.dataManage')}`, |
| | | `${$t('dataManage.dataStatistics')}`, |
| | | ]"></My-bread> |
| | | <el-divider /> |
| | | <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" |
| | | > |
| | | <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"> |
| | | </el-tree> |
| | | </div> |
| | | <div |
| | | class="content_Right subpage_Div" |
| | | style="border: 1px solid #dcdfe6;" |
| | | > |
| | | <div |
| | | class=" subpage_Div iquery" |
| | | style="padding-bottom: 14px" |
| | | > |
| | | <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-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 label="数据存储量" value="sjccl"> |
| | | </el-option> |
| | | <el-option |
| | | label="文件个数" |
| | | value="sjts" |
| | | > |
| | | |
| | | <el-option label="文件个数" value="sjts"> |
| | | </el-option> |
| | | |
| | | </el-select> |
| | | |
| | | </el-form-item> |
| | | <el-form-item v-show="!setCountFlag" label="总计:"> |
| | | {{ dataVolume }} |
| | | |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button |
| | | icon="el-icon-c-scale-to-original" |
| | | size="small" |
| | | type="warning" |
| | | @click="setCountFlagChange(1)" |
| | | >{{ $t("shuJuGuanLi.butten.Report") }}</el-button> |
| | | <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> |
| | | <el-button |
| | | icon="el-icon-pie-chart" |
| | | size="small" |
| | | type="primary" |
| | | @click="setCountFlagChange(2)" |
| | | >{{ $t("shuJuGuanLi.butten.Histogram") }}</el-button> |
| | | <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="setDownloadType"> |
| | | <el-button |
| | | icon="el-icon-download" |
| | | size="small" |
| | | type="success" |
| | | @click="setCountFlagChange(3)" |
| | | >{{ $t("shuJuGuanLi.butten.Download") }}</el-button> |
| | | <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')" |
| | | > |
| | | <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 |
| | | 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="sizes" |
| | | 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'" |
| | | prop="count" |
| | | key="4" |
| | | align="center" |
| | | :label="$t('dataManage.dataStaticObj.type8')" |
| | | > |
| | | <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 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" |
| | | key="6" |
| | | align="center" |
| | | :label="$t('dataManage.dataStaticObj.type7')" |
| | | > |
| | | <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 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 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" |
| | | key="4" |
| | | align="center" |
| | | :label="$t('dataManage.dataStaticObj.type8')" |
| | | > |
| | | <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 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 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" |
| | | key="4" |
| | | align="center" |
| | | :label="$t('dataManage.dataStaticObj.type8')" |
| | | > |
| | | <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> |
| | | |
| | | </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')" |
| | | > |
| | | <el-table-column width="120" :label="$t('common.operate')"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | @click="setDownLoadRow(scope.row)" |
| | | size="small" |
| | | > |
| | | <el-button @click="setDownLoadRow(scope.row)" size="small"> |
| | | {{ $t("common.download") }} |
| | | </el-button> |
| | | </template> |
| | |
| | | </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> |
| | | |
| | |
| | | dataCount_selectCountSizes, |
| | | dataCount_downloadReport, |
| | | dataCount_countSizesByType, |
| | | dataCount_countSizesByPrj |
| | | dataCount_countSizesByPrj, |
| | | dataCount_countExplorationPoints |
| | | } from "../../api/api.js"; |
| | | import { t } from 'element-ui/lib/locale'; |
| | | export default { |
| | | name: "DataStatistics", |
| | | components: { MyBread }, |
| | |
| | | value: "countServices", |
| | | children: [], |
| | | }, |
| | | |
| | | { |
| | | id: 6, |
| | | label: "钻孔数据统计", |
| | | value: "countExplorationPoints", |
| | | children: [], |
| | | }, |
| | | ], |
| | | tjlxData: { |
| | | region: 'sjccl', |
| | |
| | | option: null, |
| | | showDownLoadFlag: false, |
| | | setDownloadType: false, |
| | | dataVolume: null, |
| | | reportFormsData: [], |
| | | |
| | | }; |
| | | }, |
| | |
| | | this.showCountEchart() |
| | | }, |
| | | formatterColumn(row, column, cellValue, index) { |
| | | |
| | | return (row.sizes / 1024).toFixed(6) + "GB" |
| | | 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 + "个" |
| | | }, |
| | | setDownLoadRow(rows) { |
| | | var url = |
| | |
| | | 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; |
| | | count += this.tableData[i].count; |
| | | } |
| | | 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: |
| | |
| | | let dataAxis = []; |
| | | let yMax = 0; |
| | | this.option = {} |
| | | |
| | | this.dataVolume = 0; |
| | | let data = []; |
| | | window.sjName = this.queryData.value |
| | | window.sjType = this.tjlxData.region |
| | |
| | | data.push(this.tableData[i].count); |
| | | var m1 = this.tableData[i].m1; |
| | | dataAxis.push(m1); |
| | | this.dataVolume += this.tableData[i].count; |
| | | |
| | | } |
| | | this.dataVolume += "次" |
| | | } 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') { |
| | | data.push((this.tableData[i].sizes / 1024).toFixed(6)); |
| | | |
| | | 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'; |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | |
| | | if (sjType == 'sjts') { |
| | | p_val = p_name + '<br/>文件个数:' + params[0].data + '个' |
| | | } else { |
| | | p_val = p_name + '<br/>数据存储量:' + params[0].data + 'GB' |
| | | 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; |
| | |
| | | // 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)], |
| | |
| | | this.setDownloadType = true; |
| | | 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") { |
| | |
| | | } else if (this.queryData.value == "countSizesByPrj") { |
| | | data = await dataCount_countSizesByPrj(); |
| | | this.setDownloadType = false; |
| | | } else if (this.queryData.value == "countExplorationPoints") { |
| | | data = await dataCount_countExplorationPoints(); |
| | | } |
| | | |
| | | |
| | |
| | | padding: 10px; |
| | | position: relative; |
| | | overflow: hidden; |
| | | |
| | | .contentBox { |
| | | padding-top: 10px; |
| | | |
| | |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: space-around; |
| | | |
| | | .content_Left { |
| | | width: 15%; |
| | | height: calc(95% - 2px); |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | } |
| | | |
| | | .content_Right { |
| | | width: 80%; |
| | | height: calc(95% - 2px); |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | |
| | | .iquery { |
| | | //padding: 1%; |
| | | border-radius: 5px; |
| | |
| | | justify-content: flex-end; |
| | | padding: 0px !important; |
| | | } |
| | | |
| | | .contentTable { |
| | | 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; |