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 @@ | @@ -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,7 +3,7 @@ | ||
3 | <el-dialog | 3 | <el-dialog |
4 | :title="dialogForm.title" | 4 | :title="dialogForm.title" |
5 | :visible.sync="dialogForm.dialogVisible" | 5 | :visible.sync="dialogForm.dialogVisible" |
6 | - width="30%" | 6 | + width="40%" |
7 | @close="handleClose"> | 7 | @close="handleClose"> |
8 | <el-row> | 8 | <el-row> |
9 | <el-form :model="dialogForm" ref="dialogForm" :rules="rules"> | 9 | <el-form :model="dialogForm" ref="dialogForm" :rules="rules"> |
@@ -15,6 +15,38 @@ | @@ -15,6 +15,38 @@ | ||
15 | v-model="dialogForm.textarea"> | 15 | v-model="dialogForm.textarea"> |
16 | </el-input> | 16 | </el-input> |
17 | </el-form-item> | 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 | </el-form> | 50 | </el-form> |
19 | </el-row> | 51 | </el-row> |
20 | <span slot="footer" class="dialog-footer"> | 52 | <span slot="footer" class="dialog-footer"> |
@@ -27,30 +59,45 @@ | @@ -27,30 +59,45 @@ | ||
27 | 59 | ||
28 | <script> | 60 | <script> |
29 | import { submitData } from '@/api/projectSubmission' | 61 | import { submitData } from '@/api/projectSubmission' |
62 | +import req from '@/utils/request.js' | ||
30 | export default { | 63 | export default { |
31 | name: "projectSubmissionDialog", | 64 | name: "projectSubmissionDialog", |
32 | data(){ | 65 | data(){ |
33 | return { | 66 | return { |
67 | + dialogType:'rk', | ||
68 | + tableImportData:[], | ||
69 | + action: '', | ||
70 | + newFile: new FormData(), // 1. 定义一个newFile变量(FormData 对象) | ||
34 | dialogForm:{ | 71 | dialogForm:{ |
35 | dialogVisible:false, | 72 | dialogVisible:false, |
36 | title:'入库', | 73 | title:'入库', |
37 | textarea:'', | 74 | textarea:'', |
38 | label:'入库说明:', | 75 | label:'入库说明:', |
39 | fProjectId:'', | 76 | fProjectId:'', |
40 | - fEventType:'' | 77 | + fEventType:'', |
78 | + fileList:[] | ||
41 | }, | 79 | }, |
42 | rules:{ | 80 | rules:{ |
43 | textarea:[ | 81 | textarea:[ |
44 | { required: true, message: this.dialogType =='rk'?'请填写入库说明':this.dialogType=='zf'?'请填写作废说明':this.dialogType == 'xmjz'?'请填写本次项目进展说明':'请填写内容', trigger: 'blur' } | 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 | methods:{ | 94 | methods:{ |
50 | open(type,row){ | 95 | open(type,row){ |
51 | console.log('打印type',type); | 96 | console.log('打印type',type); |
52 | console.log('打印row',row); | 97 | console.log('打印row',row); |
53 | this.dialogType = type; | 98 | this.dialogType = type; |
99 | + this.dialogForm.fileList = []; | ||
100 | + this.tableImportData = []; | ||
54 | console.log('打印this.dialogType',this.dialogType); | 101 | console.log('打印this.dialogType',this.dialogType); |
55 | this.dialogForm.fProjectId = row.id_; | 102 | this.dialogForm.fProjectId = row.id_; |
56 | this.dialogForm.dialogVisible = true; | 103 | this.dialogForm.dialogVisible = true; |
@@ -77,6 +124,61 @@ export default { | @@ -77,6 +124,61 @@ export default { | ||
77 | break; | 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 | handleSubmit(formName){ | 182 | handleSubmit(formName){ |
81 | this.$refs[formName].validate(async (valid) => { | 183 | this.$refs[formName].validate(async (valid) => { |
82 | if (valid) { | 184 | if (valid) { |
@@ -85,6 +187,12 @@ export default { | @@ -85,6 +187,12 @@ export default { | ||
85 | fEventType:this.dialogForm.fEventType, | 187 | fEventType:this.dialogForm.fEventType, |
86 | fProgressStatus:this.dialogForm.textarea | 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 | await submitData(params).then((res)=>{ | 196 | await submitData(params).then((res)=>{ |
89 | console.log('打印res',res); | 197 | console.log('打印res',res); |
90 | if(res.code == 200){ | 198 | if(res.code == 200){ |
@@ -110,6 +218,15 @@ export default { | @@ -110,6 +218,15 @@ export default { | ||
110 | } | 218 | } |
111 | </script> | 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 | </style> | 232 | </style> |
@@ -0,0 +1,362 @@ | @@ -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,8 +7,7 @@ | ||
7 | <el-date-picker | 7 | <el-date-picker |
8 | v-model="timeRange" | 8 | v-model="timeRange" |
9 | @change="handleTimeChange" | 9 | @change="handleTimeChange" |
10 | - type="datetimerange" | ||
11 | - :default-time="['00:00:00', '23:59:59']" | 10 | + type="daterange" |
12 | value-format="yyyy-MM-dd" | 11 | value-format="yyyy-MM-dd" |
13 | format="yyyy-MM-dd" | 12 | format="yyyy-MM-dd" |
14 | range-separator="至" | 13 | range-separator="至" |
@@ -19,7 +18,7 @@ | @@ -19,7 +18,7 @@ | ||
19 | </div> | 18 | </div> |
20 | </div> | 19 | </div> |
21 | <div class="top-content"> | 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 | <div :style="{backgroundColor:item.bgColor}" class="imgSty"> | 22 | <div :style="{backgroundColor:item.bgColor}" class="imgSty"> |
24 | <el-image :src="item.imgUrl"></el-image> | 23 | <el-image :src="item.imgUrl"></el-image> |
25 | </div> | 24 | </div> |
@@ -100,26 +99,44 @@ export default { | @@ -100,26 +99,44 @@ export default { | ||
100 | { | 99 | { |
101 | bgColor:'#e8f4ff', | 100 | bgColor:'#e8f4ff', |
102 | imgUrl:fileImg, | 101 | imgUrl:fileImg, |
103 | - title:'已通过投评项目(个)', | 102 | + title:'商机阶段(个)', |
104 | num:9 | 103 | num:9 |
105 | }, | 104 | }, |
106 | { | 105 | { |
107 | bgColor:'#ebf9ef', | 106 | bgColor:'#ebf9ef', |
108 | imgUrl:eyeImg, | 107 | imgUrl:eyeImg, |
109 | - title:'已签约项目(个)', | 108 | + title:'前期开发阶段(个)', |
110 | num:9 | 109 | num:9 |
111 | }, | 110 | }, |
112 | { | 111 | { |
113 | bgColor:'#fffae8', | 112 | bgColor:'#fffae8', |
114 | - title:'预计总年收入(亿元)', | 113 | + title:'通过事业部投评阶段(个)', |
115 | num:100, | 114 | num:100, |
116 | imgUrl:paperImg | 115 | imgUrl:paperImg |
117 | }, | 116 | }, |
118 | { | 117 | { |
118 | + bgColor:'#f3edfc', | ||
119 | + imgUrl:fileImg, | ||
120 | + title:'通过集团过会阶段(个)', | ||
121 | + num:9 | ||
122 | + }, | ||
123 | + { | ||
119 | bgColor:'#e8f9f9', | 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 | summaryTwoOptions:[ | 142 | summaryTwoOptions:[ |
@@ -156,19 +173,29 @@ export default { | @@ -156,19 +173,29 @@ export default { | ||
156 | title:'暂缓项目数(个)' | 173 | title:'暂缓项目数(个)' |
157 | }, | 174 | }, |
158 | { | 175 | { |
159 | - color:'#8543e0', | 176 | + color:'#facc14', |
160 | num:100, | 177 | num:100, |
161 | title:'出库项目数(个)' | 178 | title:'出库项目数(个)' |
162 | }, | 179 | }, |
163 | { | 180 | { |
164 | - color:'#15c2c3', | 181 | + color:'#8543e0', |
165 | num:100, | 182 | num:100, |
166 | title:'重点推进项目(个)' | 183 | title:'重点推进项目(个)' |
167 | }, | 184 | }, |
168 | { | 185 | { |
169 | - color:'#f04864', | 186 | + color:'#15c2c3', |
170 | num:100, | 187 | num:100, |
171 | title:'预计总投资(亿元)' | 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 | color: [ | 201 | color: [ |
@@ -241,17 +268,23 @@ export default { | @@ -241,17 +268,23 @@ export default { | ||
241 | endDate:this.timeRange[1]?this.timeRange[1]:'' | 268 | endDate:this.timeRange[1]?this.timeRange[1]:'' |
242 | } | 269 | } |
243 | await querySummaryData(params).then((res)=>{ | 270 | await querySummaryData(params).then((res)=>{ |
271 | + console.log('打印项目港能测试=====》res',res); | ||
244 | const { value } = res; | 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 | this.summaryOneOptions[0].num = XMZS?XMZS:0; | 281 | this.summaryOneOptions[0].num = XMZS?XMZS:0; |
251 | this.summaryOneOptions[1].num = ZHXMS?ZHXMS:0; | 282 | this.summaryOneOptions[1].num = ZHXMS?ZHXMS:0; |
252 | this.summaryOneOptions[2].num = CKXMS?CKXMS:0; | 283 | this.summaryOneOptions[2].num = CKXMS?CKXMS:0; |
253 | this.summaryOneOptions[3].num = BYZDTJXMS?BYZDTJXMS:0; | 284 | this.summaryOneOptions[3].num = BYZDTJXMS?BYZDTJXMS:0; |
254 | this.summaryOneOptions[4].num = YJZTZ?YJZTZ:0; | 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 | this.summaryTwoOptions[0].num = ZHGR?ZHGR:0; | 288 | this.summaryTwoOptions[0].num = ZHGR?ZHGR:0; |
256 | this.summaryTwoOptions[1].num = ZHNX?ZHNX:0; | 289 | this.summaryTwoOptions[1].num = ZHNX?ZHNX:0; |
257 | this.summaryTwoOptions[2].num = GF?GF:0; | 290 | this.summaryTwoOptions[2].num = GF?GF:0; |
@@ -383,7 +416,7 @@ export default { | @@ -383,7 +416,7 @@ export default { | ||
383 | }, | 416 | }, |
384 | series: [ | 417 | series: [ |
385 | { | 418 | { |
386 | - name: 'Access From', | 419 | + // name: 'Access From', |
387 | type: 'pie', | 420 | type: 'pie', |
388 | radius: ['40%', '60%'], | 421 | radius: ['40%', '60%'], |
389 | avoidLabelOverlap: false, | 422 | avoidLabelOverlap: false, |
@@ -562,12 +595,15 @@ export default { | @@ -562,12 +595,15 @@ export default { | ||
562 | } | 595 | } |
563 | ] | 596 | ] |
564 | }); | 597 | }); |
565 | - | ||
566 | }, | 598 | }, |
567 | } | 599 | } |
568 | } | 600 | } |
569 | </script> | 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 | <style lang="scss" scoped> | 607 | <style lang="scss" scoped> |
572 | .container{ | 608 | .container{ |
573 | height: 100%; | 609 | height: 100%; |
@@ -585,7 +621,7 @@ export default { | @@ -585,7 +621,7 @@ export default { | ||
585 | display: flex; | 621 | display: flex; |
586 | align-items: center; | 622 | align-items: center; |
587 | width: calc(100% / 4); | 623 | width: calc(100% / 4); |
588 | - padding: 20px; | 624 | + padding: 15px; |
589 | margin-right:10px; | 625 | margin-right:10px; |
590 | background-color: #ffffff; | 626 | background-color: #ffffff; |
591 | border-radius: 5px; | 627 | border-radius: 5px; |
@@ -597,6 +633,7 @@ export default { | @@ -597,6 +633,7 @@ export default { | ||
597 | font-family: "苹方 中等", 苹方, sans-serif; | 633 | font-family: "苹方 中等", 苹方, sans-serif; |
598 | font-weight: 400; | 634 | font-weight: 400; |
599 | font-style: normal; | 635 | font-style: normal; |
636 | + //font-size: 13px!important; | ||
600 | color: rgb(127, 130, 149); | 637 | color: rgb(127, 130, 149); |
601 | } | 638 | } |
602 | .numSty{ | 639 | .numSty{ |