Commit e58f1dbf471d25e273838b05c9b35c0a8e78e429
1 parent
42a0330e
Exists in
master
fix:优化bug以及新增分析表功能模块
Showing
4 changed files
with
567 additions
and
24 deletions
Show diff stats
| ... | ... | @@ -0,0 +1,27 @@ |
| 1 | +import request from '@/utils/request' | |
| 2 | +const portal = window.context.portal | |
| 3 | + | |
| 4 | +// 查询柱状图数据接口 | |
| 5 | +export function queryBarData(params) { | |
| 6 | + return request({ | |
| 7 | + url: `${context.form}/wProjectLibraryInventory/v1/areaDataAnalysis`, | |
| 8 | + method: 'get', | |
| 9 | + params | |
| 10 | + }) | |
| 11 | +} | |
| 12 | +// 查询Table表格数据接口 | |
| 13 | +export function queryTableData(params) { | |
| 14 | + return request({ | |
| 15 | + url: `${context.form}/wProjectLibraryInventory/v1/areaData`, | |
| 16 | + method: 'get', | |
| 17 | + params | |
| 18 | + }) | |
| 19 | +} | |
| 20 | +// 获取表单的打印模板列表 | |
| 21 | +export function areaData(data) { | |
| 22 | + return request({ | |
| 23 | + url: `${context.form}/form/customQuery/v1/doQuery?alias=sjzd&page=1&pageSize=100`, | |
| 24 | + data, | |
| 25 | + method: 'post', | |
| 26 | + }) | |
| 27 | +} | ... | ... |
frontend/front/src/components/dialog/projectSubmissionDialog.vue
| ... | ... | @@ -3,7 +3,7 @@ |
| 3 | 3 | <el-dialog |
| 4 | 4 | :title="dialogForm.title" |
| 5 | 5 | :visible.sync="dialogForm.dialogVisible" |
| 6 | - width="30%" | |
| 6 | + width="40%" | |
| 7 | 7 | @close="handleClose"> |
| 8 | 8 | <el-row> |
| 9 | 9 | <el-form :model="dialogForm" ref="dialogForm" :rules="rules"> |
| ... | ... | @@ -15,6 +15,38 @@ |
| 15 | 15 | v-model="dialogForm.textarea"> |
| 16 | 16 | </el-input> |
| 17 | 17 | </el-form-item> |
| 18 | + <el-col v-if="dialogType=='xmjz'"> | |
| 19 | + <el-form-item label="附件" prop="fileList"> | |
| 20 | + <template slot="label">附件<span style="color: #999db0;">(支持.jpg、png、pdf、doc、.xlsx、.xls文件格式，文件大小不超过20M )</span></template> | |
| 21 | + <el-upload | |
| 22 | + ref="signatureUpload" | |
| 23 | + :action="action" | |
| 24 | + class="signature-manage_upload uploadSty" | |
| 25 | + accept=".jpeg,.jpg,.png,.pdf,.xlsx,.xls,.doc" | |
| 26 | + :limit="8" | |
| 27 | + :file-list="dialogForm.fileList" | |
| 28 | + :on-remove="handleDealImgRemove" | |
| 29 | + :http-request="httpRequest" | |
| 30 | + :before-upload="beforeAvatarUpload" | |
| 31 | + > | |
| 32 | + <div style="display: flex;justify-content: space-between;width: 100%; align-items: center;"> | |
| 33 | + <span>文件名称</span> | |
| 34 | + <el-button size="small" type="primary">+上传附件</el-button> | |
| 35 | + </div> | |
| 36 | + </el-upload> | |
| 37 | + <el-table | |
| 38 | + :data="tableImportData" | |
| 39 | + style="width: 100%; margin-top: 10px;"> | |
| 40 | + <el-table-column prop="name" label=""></el-table-column> | |
| 41 | + <el-table-column prop="size" label=""></el-table-column> | |
| 42 | + <el-table-column prop="opt" label="" width="80"> | |
| 43 | + <template slot-scope="scope"> | |
| 44 | + <i class="el-icon-delete" style="color: red;cursor: pointer" @click="fileDelete(scope.row,scope.$index)"></i> | |
| 45 | + </template> | |
| 46 | + </el-table-column> | |
| 47 | + </el-table> | |
| 48 | + </el-form-item> | |
| 49 | + </el-col> | |
| 18 | 50 | </el-form> |
| 19 | 51 | </el-row> |
| 20 | 52 | <span slot="footer" class="dialog-footer"> |
| ... | ... | @@ -27,30 +59,45 @@ |
| 27 | 59 | |
| 28 | 60 | <script> |
| 29 | 61 | import { submitData } from '@/api/projectSubmission' |
| 62 | +import req from '@/utils/request.js' | |
| 30 | 63 | export default { |
| 31 | 64 | name: "projectSubmissionDialog", |
| 32 | 65 | data(){ |
| 33 | 66 | return { |
| 67 | + dialogType:'rk', | |
| 68 | + tableImportData:[], | |
| 69 | + action: '', | |
| 70 | + newFile: new FormData(), // 1. 定义一个newFile变量（FormData 对象） | |
| 34 | 71 | dialogForm:{ |
| 35 | 72 | dialogVisible:false, |
| 36 | 73 | title:'入库', |
| 37 | 74 | textarea:'', |
| 38 | 75 | label:'入库说明:', |
| 39 | 76 | fProjectId:'', |
| 40 | - fEventType:'' | |
| 77 | + fEventType:'', | |
| 78 | + fileList:[] | |
| 41 | 79 | }, |
| 42 | 80 | rules:{ |
| 43 | 81 | textarea:[ |
| 44 | 82 | { required: true, message: this.dialogType =='rk'?'请填写入库说明':this.dialogType=='zf'?'请填写作废说明':this.dialogType == 'xmjz'?'请填写本次项目进展说明':'请填写内容', trigger: 'blur' } |
| 83 | + ], | |
| 84 | + fileList:[ | |
| 85 | + {required: true,message:'请上传附件'} | |
| 45 | 86 | ] |
| 46 | 87 | } |
| 47 | 88 | } |
| 48 | 89 | }, |
| 90 | + created() { | |
| 91 | + // 上传路径拼接 | |
| 92 | + this.action = `${window.context.portal}/system/file/v1/upload` | |
| 93 | + }, | |
| 49 | 94 | methods:{ |
| 50 | 95 | open(type,row){ |
| 51 | 96 | console.log('打印type',type); |
| 52 | 97 | console.log('打印row',row); |
| 53 | 98 | this.dialogType = type; |
| 99 | + this.dialogForm.fileList = []; | |
| 100 | + this.tableImportData = []; | |
| 54 | 101 | console.log('打印this.dialogType',this.dialogType); |
| 55 | 102 | this.dialogForm.fProjectId = row.id_; |
| 56 | 103 | this.dialogForm.dialogVisible = true; |
| ... | ... | @@ -77,6 +124,61 @@ export default { |
| 77 | 124 | break; |
| 78 | 125 | } |
| 79 | 126 | }, |
| 127 | + // 自定义上传 | |
| 128 | + async httpRequest(val) { | |
| 129 | + console.log('打印val',val); | |
| 130 | + const formData = new FormData() | |
| 131 | + formData.append('files', val.file) | |
| 132 | + let response = await req.post( | |
| 133 | + window.context.portal + '/system/file/v1/fileUpload', | |
| 134 | + formData | |
| 135 | + ) | |
| 136 | + if (response.success) { | |
| 137 | + this.$message.success('上传成功') | |
| 138 | + console.log('打印response',response); | |
| 139 | + this.tableImportData.push({ | |
| 140 | + name:response.fileName, | |
| 141 | + size:Number(response.size / 1024 / 1024).toFixed(4) + 'M', | |
| 142 | + fileId:response.fileId, | |
| 143 | + fileObj:JSON.stringify(response) | |
| 144 | + }); | |
| 145 | + this.dialogForm.fileList = this.tableImportData; | |
| 146 | + // this.form.fileId = response.fileId | |
| 147 | + // this.form.userId = this.$store.state.user.userInfo.user.userId | |
| 148 | + } | |
| 149 | + }, | |
| 150 | + //删除附件 | |
| 151 | + // 删除 | |
| 152 | + handleDealImgRemove(file, fileList) { | |
| 153 | + this.noneBtnImg = fileList.length >= this.limitCountImg | |
| 154 | + this.fileList = [] | |
| 155 | + }, //头像上传 | |
| 156 | + beforeAvatarUpload(file) { | |
| 157 | + var FileExt = file.name.replace(/.+\./, ''); | |
| 158 | + console.log('dayfileExt',FileExt); | |
| 159 | + let arr = ['jpg','png','pdf','xlsx','doc','xls'] | |
| 160 | + if (arr.indexOf(FileExt.toLowerCase()) === -1) { | |
| 161 | + this.$message({ | |
| 162 | + type: 'warning', | |
| 163 | + message: '请上传后缀名为jpg、png、pdf、doc、xlsx、xls类型的附件', | |
| 164 | + }) | |
| 165 | + return false | |
| 166 | + } | |
| 167 | + const isLt20M = file.size / 1024 / 1024 < 20 | |
| 168 | + if (!isLt20M) { | |
| 169 | + setTimeout(() => { | |
| 170 | + this.$message.error('上传附件大小不能超过 20MB!') | |
| 171 | + }, 100); | |
| 172 | + } | |
| 173 | + }, | |
| 174 | + //删除附件数据 | |
| 175 | + fileDelete(row,index){ | |
| 176 | + console.log('打印row',row); | |
| 177 | + this.tableImportData.splice(index,1) | |
| 178 | + }, | |
| 179 | + handleExceed(files, fileList) { | |
| 180 | + this.$message.warning(`当前限制选择 8 个文件`); | |
| 181 | + }, | |
| 80 | 182 | handleSubmit(formName){ |
| 81 | 183 | this.$refs[formName].validate(async (valid) => { |
| 82 | 184 | if (valid) { |
| ... | ... | @@ -85,6 +187,12 @@ export default { |
| 85 | 187 | fEventType:this.dialogForm.fEventType, |
| 86 | 188 | fProgressStatus:this.dialogForm.textarea |
| 87 | 189 | } |
| 190 | + if(this.dialogType == 'xmjz'){ | |
| 191 | + // console.log('Day this.dialogForm',this.dialogForm.fileList,this.tableImportData); | |
| 192 | + let photoList = this.tableImportData.map(item => JSON.parse(item.fileObj)); | |
| 193 | + // console.log('打印photoList',photoList); | |
| 194 | + params.fFile = JSON.stringify(photoList); | |
| 195 | + } | |
| 88 | 196 | await submitData(params).then((res)=>{ |
| 89 | 197 | console.log('打印res',res); |
| 90 | 198 | if(res.code == 200){ |
| ... | ... | @@ -110,6 +218,15 @@ export default { |
| 110 | 218 | } |
| 111 | 219 | </script> |
| 112 | 220 | |
| 113 | -<style scoped> | |
| 221 | +<style lang="scss" scoped> | |
| 222 | +::v-deep .uploadSty .el-upload-list { | |
| 223 | + display: none; | |
| 224 | + width: 0; /* 上传按钮隐藏 */ | |
| 225 | + height: 0; | |
| 226 | + opacity: 0; | |
| 227 | +} | |
| 228 | +::v-deep .uploadSty .el-upload{ | |
| 229 | + width: 100%; | |
| 230 | +} | |
| 114 | 231 | |
| 115 | 232 | </style> | ... | ... |
| ... | ... | @@ -0,0 +1,362 @@ |
| 1 | +<template> | |
| 2 | + <div class="container"> | |
| 3 | + <div class="timeSearch" > | |
| 4 | + <div style="display: flex; width: 100%; padding: 20px 0px; justify-content: space-between;align-items: center;"> | |
| 5 | + <div style="margin-left: 20px;">数据汇总时间范围</div> | |
| 6 | + <div style="margin-right: 20px;"> | |
| 7 | +<!-- <el-select v-model="dateUnitValue" style="margin-right: 10px;" placeholder="请选择">--> | |
| 8 | +<!-- <el-option--> | |
| 9 | +<!-- v-for="item in dateUnitOptions"--> | |
| 10 | +<!-- :key="item.value"--> | |
| 11 | +<!-- :label="item.label"--> | |
| 12 | +<!-- :value="item.value">--> | |
| 13 | +<!-- </el-option>--> | |
| 14 | +<!-- </el-select>--> | |
| 15 | + <el-date-picker | |
| 16 | + v-model="timeRange" | |
| 17 | + @change="handleTimeChange" | |
| 18 | + type="daterange" | |
| 19 | + class="datePickerSty" | |
| 20 | + popper-class="noClear" | |
| 21 | + :picker-options="pickerOptions" | |
| 22 | + value-format="yyyy-MM-dd" | |
| 23 | + format="yyyy-MM-dd" | |
| 24 | + range-separator="至" | |
| 25 | + start-placeholder="开始日期" | |
| 26 | + end-placeholder="结束日期"> | |
| 27 | + </el-date-picker> | |
| 28 | + </div> | |
| 29 | + </div> | |
| 30 | + </div> | |
| 31 | + <div class="barChartSty"> | |
| 32 | + <div style="display: flex; width: 100%; padding: 20px 0px;align-items: center;"> | |
| 33 | + <div style="margin-left: 20px;">区域数据分析</div> | |
| 34 | + <div style="margin-left: 20px;"> | |
| 35 | + <el-select v-model="regionValue" @change="getSummaryData" style="margin-right: 10px;" placeholder="请选择"> | |
| 36 | + <el-option | |
| 37 | + v-for="item in regionOptions" | |
| 38 | + :key="item.KEY_" | |
| 39 | + :label="item.NAME_" | |
| 40 | + :value="item.KEY_"> | |
| 41 | + </el-option> | |
| 42 | + </el-select> | |
| 43 | + </div> | |
| 44 | + </div> | |
| 45 | + <div class="barSty"> | |
| 46 | + <div style="position: relative; margin-right: 0px!important; overflow-x: auto" class="echartsBar"> | |
| 47 | + <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div> | |
| 48 | + <div style="height: 100%; width: 100%;" | |
| 49 | + v-show="bardisp" | |
| 50 | + id="barId"></div> | |
| 51 | + </div> | |
| 52 | + </div> | |
| 53 | + </div> | |
| 54 | + <div class="tableSty"> | |
| 55 | + <div style="display: flex;margin-bottom: 10px;align-items: center; justify-content: space-between"> | |
| 56 | + <div style="font-size: 18px">区域数据</div> | |
| 57 | +<!-- <el-button plain icon="el-icon-upload2" style="border: 1px solid #0b6bf1; color: #0b6bf1;">导出</el-button>--> | |
| 58 | + </div> | |
| 59 | + <div> | |
| 60 | + <el-table | |
| 61 | + :data="tableData" | |
| 62 | + border | |
| 63 | + style="width: 100%"> | |
| 64 | + <el-table-column | |
| 65 | + prop="area" | |
| 66 | + label="代表处"> | |
| 67 | + </el-table-column> | |
| 68 | + <el-table-column | |
| 69 | + prop="xmzs" | |
| 70 | + label="项目总数"> | |
| 71 | + </el-table-column> | |
| 72 | + <el-table-column | |
| 73 | + prop="sjjd" | |
| 74 | + label="商机阶段"> | |
| 75 | + </el-table-column> | |
| 76 | + <el-table-column | |
| 77 | + prop="qqkfjd" | |
| 78 | + label="前期开发"> | |
| 79 | + </el-table-column> | |
| 80 | + <el-table-column | |
| 81 | + prop="tgsybtpjd" | |
| 82 | + label="通过事业部投评"> | |
| 83 | + </el-table-column> | |
| 84 | + <el-table-column | |
| 85 | + prop="tgjtghjd" | |
| 86 | + label="通过集团过会"> | |
| 87 | + </el-table-column> | |
| 88 | + <el-table-column | |
| 89 | + prop="qyjd" | |
| 90 | + label="签约"> | |
| 91 | + </el-table-column> | |
| 92 | + <el-table-column | |
| 93 | + prop="xmjsjd" | |
| 94 | + label="建设"> | |
| 95 | + </el-table-column> | |
| 96 | + <el-table-column | |
| 97 | + prop="xmyyjd" | |
| 98 | + label="运营"> | |
| 99 | + </el-table-column> | |
| 100 | + </el-table> | |
| 101 | + </div> | |
| 102 | + </div> | |
| 103 | + </div> | |
| 104 | +</template> | |
| 105 | +<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=0d4e605c56f542b179c1cd143227d0b1"></script> | |
| 106 | +<script type="text/javascript" src="http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=0d4e605c56f542b179c1cd143227d0b1"></script> | |
| 107 | +<script> | |
| 108 | +import moment from "moment"; | |
| 109 | +import echarts from "echarts" | |
| 110 | +import { queryBarData,queryTableData,areaData } from '@/api/analysisTable' | |
| 111 | +export default { | |
| 112 | + name: "index", | |
| 113 | + data(){ | |
| 114 | + return{ | |
| 115 | + bardisp:true, | |
| 116 | + tableData:[], | |
| 117 | + selectDate:'', | |
| 118 | + timeRange:[], // 初始化为两个空字符串 | |
| 119 | + pickerMinDate: '', // 保存选中的开始时间 | |
| 120 | + // 日期时间范围在一个月以内 | |
| 121 | + pickerOptions: { | |
| 122 | + onPick: ({ | |
| 123 | + maxDate, // 选择的日期范围的最大日期 | |
| 124 | + minDate // 选择的日期范围的最小日期 | |
| 125 | + }) => { | |
| 126 | + this.selectDate = minDate.getTime() // 将最小日期的时间戳存储在selectDate变量中 | |
| 127 | + if (maxDate) { | |
| 128 | + this.selectDate = '' // 如果存在最大日期，则将selectDate重置为空字符串 | |
| 129 | + } | |
| 130 | + }, | |
| 131 | + disabledDate: (time) => { | |
| 132 | + // 如果日期的时间戳大于等于当前时间的时间戳 | |
| 133 | + if (time.getTime() >= new Date().getTime()) { | |
| 134 | + return true // 禁用该日期 今天之后的时间不可选 | |
| 135 | + } | |
| 136 | + if (this.selectDate !== '') { | |
| 137 | + const one = 31 * 24 * 3600 * 1000 // 一个月的时间间隔（毫秒数） | |
| 138 | + // 最小时间和最大时间 | |
| 139 | + const minTime = this.selectDate - one | |
| 140 | + const maxTime = this.selectDate + one | |
| 141 | + // 如果 time 的时间戳小于最小时间或大于最大时间，则禁用该日期 | |
| 142 | + return time.getTime() < minTime || time.getTime() > maxTime | |
| 143 | + } | |
| 144 | + } | |
| 145 | + }, | |
| 146 | + regionValue:'华北', | |
| 147 | + dateUnitValue:'天', | |
| 148 | + regionOptions:[], | |
| 149 | + qysjfx:{ | |
| 150 | + label:['20240607','20240611','20240612','20240613','20240617','20240624','20240619','20240620','20240621'], | |
| 151 | + data1:[22,16,14, 18,14,16,18, 16, 13], | |
| 152 | + data2:[22,16,14, 18,14,16,18, 16, 13], | |
| 153 | + data3:[22,16,14, 18,14,16,18, 16, 13] | |
| 154 | + }, | |
| 155 | + dateUnitOptions:[ | |
| 156 | + { | |
| 157 | + label:'天', | |
| 158 | + value:'天' | |
| 159 | + }, | |
| 160 | + { | |
| 161 | + label:'周', | |
| 162 | + value:'周' | |
| 163 | + }, | |
| 164 | + { | |
| 165 | + label:'月', | |
| 166 | + value:'月' | |
| 167 | + }, | |
| 168 | + { | |
| 169 | + label:'季度', | |
| 170 | + value:'季度' | |
| 171 | + } | |
| 172 | + ] | |
| 173 | + } | |
| 174 | + }, | |
| 175 | + async created() { | |
| 176 | + // 获取今年第一天的日期 | |
| 177 | + const firstDayOfYear = moment().startOf('year').format('YYYY-MM-DD'); | |
| 178 | + console.log('打印firstDayofYear',firstDayOfYear); | |
| 179 | + let currentDate = moment(new Date()).format('YYYY-MM-DD'); | |
| 180 | + let nextMonthDate = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'); | |
| 181 | + console.log('打印endData',currentDate,nextMonthDate); | |
| 182 | + this.timeRange[1]=currentDate?currentDate:''; | |
| 183 | + this.timeRange[0]= nextMonthDate?nextMonthDate:''; | |
| 184 | + await this.getAreaData(); | |
| 185 | + this.$nextTick(()=>{ | |
| 186 | + this.initMap(); | |
| 187 | + }) | |
| 188 | + await this.getSummaryData(); | |
| 189 | + }, | |
| 190 | + methods:{ | |
| 191 | + //获取area数据 | |
| 192 | + async getAreaData(){ | |
| 193 | + let params=[{"key":"PARENT_ID_","value":"1825454054277451776"}] | |
| 194 | + await areaData(params).then((res)=>{ | |
| 195 | + console.log('打印Res',res); | |
| 196 | + const { rows } = res; | |
| 197 | + this.regionOptions = rows; | |
| 198 | + this.regionValue = rows[0].KEY_; | |
| 199 | + }) | |
| 200 | + }, | |
| 201 | + //时间日期范围的改变事件 | |
| 202 | + handleTimeChange(dateVal){ | |
| 203 | + this.timeRange[0] = dateVal[0]; | |
| 204 | + this.timeRange[1] = dateVal[1]; | |
| 205 | + console.log('打印deteVal',dateVal); | |
| 206 | + this.getSummaryData(); | |
| 207 | + }, | |
| 208 | + async getSummaryData(){ | |
| 209 | + let tableParams ={ | |
| 210 | + startDate:this.timeRange?this.timeRange[0]:'', | |
| 211 | + endDate:this.timeRange?this.timeRange[1]:'' | |
| 212 | + } | |
| 213 | + let barParams ={ | |
| 214 | + ...tableParams, | |
| 215 | + type:1, | |
| 216 | + area:this.regionValue?this.regionValue:'' | |
| 217 | + } | |
| 218 | + await queryBarData(barParams).then((res)=>{ | |
| 219 | + console.log('打印BarREs',res); | |
| 220 | + const { value } = res; | |
| 221 | + const { rq,type1,type2,type3 } = value; | |
| 222 | + this.qysjfx.label = rq?rq:[]; | |
| 223 | + this.qysjfx.data1 = type1?type1:[]; | |
| 224 | + this.qysjfx.data2 = type2?type2:[]; | |
| 225 | + this.qysjfx.data3 = type3?type3:[]; | |
| 226 | + setTimeout(()=>{ | |
| 227 | + | |
| 228 | + this.queryBar(this.qysjfx) | |
| 229 | + },1000) | |
| 230 | + }); | |
| 231 | + await queryTableData(tableParams).then((res)=>{ | |
| 232 | + console.log('打印tableRes',res); | |
| 233 | + const { value } = res; | |
| 234 | + this.tableData = value; | |
| 235 | + }) | |
| 236 | + }, | |
| 237 | + //生成柱状图 | |
| 238 | + queryBar(qysjfx){ | |
| 239 | + var echarts = require("echarts"); | |
| 240 | + let myChart = echarts.init(document.getElementById("barId")); | |
| 241 | + myChart.setOption({ | |
| 242 | + title: { | |
| 243 | + text: "业务场景占比", | |
| 244 | + }, | |
| 245 | + tooltip: { | |
| 246 | + trigger: 'axis', | |
| 247 | + axisPointer: { | |
| 248 | + type: 'shadow' | |
| 249 | + } | |
| 250 | + }, | |
| 251 | + grid: { | |
| 252 | + left: '3%', | |
| 253 | + right: '4%', | |
| 254 | + bottom: '3%', | |
| 255 | + containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。 | |
| 256 | + }, | |
| 257 | + xAxis: [{ | |
| 258 | + type: 'category', | |
| 259 | + data: qysjfx.label, | |
| 260 | + axisLabel:{ | |
| 261 | + fontSize:10 | |
| 262 | + }, | |
| 263 | + axisTick: { | |
| 264 | + alignWithLabel: true | |
| 265 | + } | |
| 266 | + }], | |
| 267 | + yAxis: [{ | |
| 268 | + type: 'value', | |
| 269 | + splitLine:{ | |
| 270 | + show:true, | |
| 271 | + lineStyle:{ | |
| 272 | + type:'dashed' | |
| 273 | + } | |
| 274 | + } | |
| 275 | + // inverse: true,//倒叙 | |
| 276 | + // data: gpss.label | |
| 277 | + }], | |
| 278 | + series: [ | |
| 279 | + { | |
| 280 | + name: '商机', | |
| 281 | + type: 'bar', | |
| 282 | + barWidth: 20, | |
| 283 | + data: qysjfx.data1 | |
| 284 | + }, | |
| 285 | + { | |
| 286 | + name: '通过投评', | |
| 287 | + type: 'bar', | |
| 288 | + barWidth: 20, | |
| 289 | + data: qysjfx.data2 | |
| 290 | + }, | |
| 291 | + { | |
| 292 | + name: '集团过会', | |
| 293 | + type: 'bar', | |
| 294 | + barWidth: 20, | |
| 295 | + data: qysjfx.data3 | |
| 296 | + } | |
| 297 | + ] | |
| 298 | + }); | |
| 299 | + let echartWidth = ''; | |
| 300 | + if(qysjfx.data1.length<10){ | |
| 301 | + echartWidth = 1200 | |
| 302 | + }else{ | |
| 303 | + var numLength = (qysjfx.data1.length - 10)* 65; | |
| 304 | + echartWidth = 1200 + numLength; | |
| 305 | + } | |
| 306 | + myChart.resize({width:echartWidth}) | |
| 307 | + }, | |
| 308 | + } | |
| 309 | +} | |
| 310 | +</script> | |
| 311 | +<style lang="scss"> | |
| 312 | +.el-date-table td.today.start-date span, .el-date-table td.today.end-date span{ | |
| 313 | + color: #ffffff!important; | |
| 314 | +} | |
| 315 | +.el-date-editor .el-range__close-icon{ | |
| 316 | + display: none!important; | |
| 317 | +} | |
| 318 | +//.noClear .el-picker-panel__footer .el-button.el-picker-panel__link-btn.el-button--text.el-button--mini { | |
| 319 | +// display: none ; | |
| 320 | +//} | |
| 321 | +</style> | |
| 322 | +<style lang="scss" scoped> | |
| 323 | + | |
| 324 | +.container{ | |
| 325 | + width: 100%; | |
| 326 | + height: 100%; | |
| 327 | + .timeSearch{ | |
| 328 | + width: 100%; | |
| 329 | + border-radius: 5px; | |
| 330 | + background-color: #ffffff; | |
| 331 | + margin-bottom: 15px; | |
| 332 | + } | |
| 333 | + .barChartSty{ | |
| 334 | + width: 100%; | |
| 335 | + border-radius: 5px; | |
| 336 | + background-color: #ffffff; | |
| 337 | + margin-bottom: 15px; | |
| 338 | + .barSty{ | |
| 339 | + width: 100%; | |
| 340 | + overflow-x: auto; | |
| 341 | + display: flex; | |
| 342 | + margin-top: 10px; | |
| 343 | + .echartsBar{ | |
| 344 | + border-radius: 4px; | |
| 345 | + width: 100%; | |
| 346 | + height: 270px; | |
| 347 | + //min-width: 900px; | |
| 348 | + padding: 15px; | |
| 349 | + background-color: #ffffff; | |
| 350 | + margin-right: 10px; | |
| 351 | + } | |
| 352 | + } | |
| 353 | + } | |
| 354 | + .tableSty{ | |
| 355 | + border-radius: 5px; | |
| 356 | + padding:20px; | |
| 357 | + background-color: #ffffff; | |
| 358 | + margin-bottom: 15px; | |
| 359 | + } | |
| 360 | +} | |
| 361 | + | |
| 362 | +</style> | ... | ... |
frontend/front/src/views/pages/projectSummaryTable/index.vue
| ... | ... | @@ -7,8 +7,7 @@ |
| 7 | 7 | <el-date-picker |
| 8 | 8 | v-model="timeRange" |
| 9 | 9 | @change="handleTimeChange" |
| 10 | - type="datetimerange" | |
| 11 | - :default-time="['00:00:00', '23:59:59']" | |
| 10 | + type="daterange" | |
| 12 | 11 | value-format="yyyy-MM-dd" |
| 13 | 12 | format="yyyy-MM-dd" |
| 14 | 13 | range-separator="至" |
| ... | ... | @@ -19,7 +18,7 @@ |
| 19 | 18 | </div> |
| 20 | 19 | </div> |
| 21 | 20 | <div class="top-content"> |
| 22 | - <div v-for="(item,index) of topOptions" :key="index" class="top-content-label" :style="{marginRight:index==3?'0px':'10px'}"> | |
| 21 | + <div v-for="(item,index) of topOptions" :key="index" class="top-content-label" :style="{marginRight:index==6?'0px':'5px',minWidth:index==2?'199px':index==3?'188px':'0px'}"> | |
| 23 | 22 | <div :style="{backgroundColor:item.bgColor}" class="imgSty"> |
| 24 | 23 | <el-image :src="item.imgUrl"></el-image> |
| 25 | 24 | </div> |
| ... | ... | @@ -100,26 +99,44 @@ export default { |
| 100 | 99 | { |
| 101 | 100 | bgColor:'#e8f4ff', |
| 102 | 101 | imgUrl:fileImg, |
| 103 | - title:'已通过投评项目(个)', | |
| 102 | + title:'商机阶段(个)', | |
| 104 | 103 | num:9 |
| 105 | 104 | }, |
| 106 | 105 | { |
| 107 | 106 | bgColor:'#ebf9ef', |
| 108 | 107 | imgUrl:eyeImg, |
| 109 | - title:'已签约项目(个)', | |
| 108 | + title:'前期开发阶段(个)', | |
| 110 | 109 | num:9 |
| 111 | 110 | }, |
| 112 | 111 | { |
| 113 | 112 | bgColor:'#fffae8', |
| 114 | - title:'预计总年收入(亿元)', | |
| 113 | + title:'通过事业部投评阶段(个)', | |
| 115 | 114 | num:100, |
| 116 | 115 | imgUrl:paperImg |
| 117 | 116 | }, |
| 118 | 117 | { |
| 118 | + bgColor:'#f3edfc', | |
| 119 | + imgUrl:fileImg, | |
| 120 | + title:'通过集团过会阶段(个)', | |
| 121 | + num:9 | |
| 122 | + }, | |
| 123 | + { | |
| 119 | 124 | bgColor:'#e8f9f9', |
| 120 | - title:'预计总年利润(亿元)', | |
| 121 | - num:200, | |
| 122 | - imgUrl:moneyImg | |
| 125 | + imgUrl:eyeImg, | |
| 126 | + title:'签约阶段(个)', | |
| 127 | + num:9 | |
| 128 | + }, | |
| 129 | + { | |
| 130 | + bgColor:'#ebebfa', | |
| 131 | + title:'项目建设阶段(个)', | |
| 132 | + num:100, | |
| 133 | + imgUrl:paperImg | |
| 134 | + }, | |
| 135 | + { | |
| 136 | + bgColor:'#feedf0', | |
| 137 | + title:'项目运营阶段(个)', | |
| 138 | + num:100, | |
| 139 | + imgUrl:paperImg | |
| 123 | 140 | }, |
| 124 | 141 | ], |
| 125 | 142 | summaryTwoOptions:[ |
| ... | ... | @@ -156,19 +173,29 @@ export default { |
| 156 | 173 | title:'暂缓项目数(个)' |
| 157 | 174 | }, |
| 158 | 175 | { |
| 159 | - color:'#8543e0', | |
| 176 | + color:'#facc14', | |
| 160 | 177 | num:100, |
| 161 | 178 | title:'出库项目数(个)' |
| 162 | 179 | }, |
| 163 | 180 | { |
| 164 | - color:'#15c2c3', | |
| 181 | + color:'#8543e0', | |
| 165 | 182 | num:100, |
| 166 | 183 | title:'重点推进项目(个)' |
| 167 | 184 | }, |
| 168 | 185 | { |
| 169 | - color:'#f04864', | |
| 186 | + color:'#15c2c3', | |
| 170 | 187 | num:100, |
| 171 | 188 | title:'预计总投资(亿元)' |
| 189 | + }, | |
| 190 | + { | |
| 191 | + color:'#3436c7', | |
| 192 | + num:100, | |
| 193 | + title:'预计总年收入(亿元)' | |
| 194 | + }, | |
| 195 | + { | |
| 196 | + color:'#f04864', | |
| 197 | + num:100, | |
| 198 | + title:'预计总年利润(亿元)' | |
| 172 | 199 | } |
| 173 | 200 | ], |
| 174 | 201 | color: [ |
| ... | ... | @@ -241,17 +268,23 @@ export default { |
| 241 | 268 | endDate:this.timeRange[1]?this.timeRange[1]:'' |
| 242 | 269 | } |
| 243 | 270 | await querySummaryData(params).then((res)=>{ |
| 271 | + console.log('打印项目港能测试=====》res',res); | |
| 244 | 272 | const { value } = res; |
| 245 | - const { YTGTPXMS,YQYXMS,YJZNSR,YJZNLR,XMZS,ZHXMS,CKXMS,BYZDTJXMS,YJZTZ,ZHGR,ZHNX,GF,CN,XMZL,TZGM,XMZTXMZB,YWCJZB,SWMSZB,} = value; | |
| 246 | - this.topOptions[0].num = YTGTPXMS?YTGTPXMS:0; | |
| 247 | - this.topOptions[1].num = YQYXMS?YQYXMS:0; | |
| 248 | - this.topOptions[2].num = YJZNSR?YJZNSR:0; | |
| 249 | - this.topOptions[3].num = YJZNLR?YJZNLR:0; | |
| 273 | + const { SJJD,QQKFJD,TGSYBTPJD,TGJTGHJD,QYJD,XMJSJD,XMYYJD,YJZNLR,XMZS,ZHXMS,CKXMS,BYZDTJXMS,YJZTZ,YJZNSR,ZHGR,ZHNX,GF,CN,XMZL,TZGM,XMZTXMZB,YWCJZB,SWMSZB,} = value; | |
| 274 | + this.topOptions[0].num = SJJD?SJJD:0; | |
| 275 | + this.topOptions[1].num = QQKFJD?QQKFJD:0; | |
| 276 | + this.topOptions[2].num = TGSYBTPJD?TGSYBTPJD:0; | |
| 277 | + this.topOptions[3].num = TGJTGHJD?TGJTGHJD:0; | |
| 278 | + this.topOptions[4].num = QYJD?QYJD:0; | |
| 279 | + this.topOptions[5].num = XMJSJD?XMJSJD:0; | |
| 280 | + this.topOptions[6].num = XMYYJD?XMYYJD:0; | |
| 250 | 281 | this.summaryOneOptions[0].num = XMZS?XMZS:0; |
| 251 | 282 | this.summaryOneOptions[1].num = ZHXMS?ZHXMS:0; |
| 252 | 283 | this.summaryOneOptions[2].num = CKXMS?CKXMS:0; |
| 253 | 284 | this.summaryOneOptions[3].num = BYZDTJXMS?BYZDTJXMS:0; |
| 254 | 285 | this.summaryOneOptions[4].num = YJZTZ?YJZTZ:0; |
| 286 | + this.summaryOneOptions[5].num = YJZNSR?YJZNSR:0; | |
| 287 | + this.summaryOneOptions[6].num = YJZNLR?YJZNLR:0; | |
| 255 | 288 | this.summaryTwoOptions[0].num = ZHGR?ZHGR:0; |
| 256 | 289 | this.summaryTwoOptions[1].num = ZHNX?ZHNX:0; |
| 257 | 290 | this.summaryTwoOptions[2].num = GF?GF:0; |
| ... | ... | @@ -383,7 +416,7 @@ export default { |
| 383 | 416 | }, |
| 384 | 417 | series: [ |
| 385 | 418 | { |
| 386 | - name: 'Access From', | |
| 419 | + // name: 'Access From', | |
| 387 | 420 | type: 'pie', |
| 388 | 421 | radius: ['40%', '60%'], |
| 389 | 422 | avoidLabelOverlap: false, |
| ... | ... | @@ -562,12 +595,15 @@ export default { |
| 562 | 595 | } |
| 563 | 596 | ] |
| 564 | 597 | }); |
| 565 | - | |
| 566 | 598 | }, |
| 567 | 599 | } |
| 568 | 600 | } |
| 569 | 601 | </script> |
| 570 | - | |
| 602 | +<style lang="scss"> | |
| 603 | +.el-date-table td.today.start-date span, .el-date-table td.today.end-date span{ | |
| 604 | + color: #ffffff!important; | |
| 605 | +} | |
| 606 | +</style> | |
| 571 | 607 | <style lang="scss" scoped> |
| 572 | 608 | .container{ |
| 573 | 609 | height: 100%; |
| ... | ... | @@ -585,7 +621,7 @@ export default { |
| 585 | 621 | display: flex; |
| 586 | 622 | align-items: center; |
| 587 | 623 | width: calc(100% / 4); |
| 588 | - padding: 20px; | |
| 624 | + padding: 15px; | |
| 589 | 625 | margin-right:10px; |
| 590 | 626 | background-color: #ffffff; |
| 591 | 627 | border-radius: 5px; |
| ... | ... | @@ -597,6 +633,7 @@ export default { |
| 597 | 633 | font-family: "苹方 中等", 苹方, sans-serif; |
| 598 | 634 | font-weight: 400; |
| 599 | 635 | font-style: normal; |
| 636 | + //font-size: 13px!important; | |
| 600 | 637 | color: rgb(127, 130, 149); |
| 601 | 638 | } |
| 602 | 639 | .numSty{ | ... | ... |