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{ | ... | ... |