中国算力平台算力登记系统2.0
yanzhaofeige
3 days ago 5cc82f45d73865489cc39e5ffbf521bf4279ec53
commit | author | age
5cc82f 1 <template>
Y 2   <div class="app-container">
3     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
4       <el-form-item label="数据中心ID" prop="baseId">
5         <el-input
6           v-model="queryParams.baseId"
7           placeholder="请输入数据中心ID"
8           clearable
9           @keyup.enter.native="handleQuery"
10         />
11       </el-form-item>
12       <el-form-item label="日期节点" prop="dateNode">
13         <el-input
14           v-model="queryParams.dateNode"
15           placeholder="请输入日期节点"
16           clearable
17           @keyup.enter.native="handleQuery"
18         />
19       </el-form-item>
20       <el-form-item label="填表联系人" prop="formName">
21         <el-input
22           v-model="queryParams.formName"
23           placeholder="请输入填表联系人"
24           clearable
25           @keyup.enter.native="handleQuery"
26         />
27       </el-form-item>
28       <el-form-item label="填表电话" prop="formTel">
29         <el-input
30           v-model="queryParams.formTel"
31           placeholder="请输入填表电话"
32           clearable
33           @keyup.enter.native="handleQuery"
34         />
35       </el-form-item>
36       <el-form-item label="已完成基础机电配置机架数" prop="frameCompBase">
37         <el-input
38           v-model="queryParams.frameCompBase"
39           placeholder="请输入已完成基础机电配置机架数"
40           clearable
41           @keyup.enter.native="handleQuery"
42         />
43       </el-form-item>
44       <el-form-item label="已完成末端机电配置机架数" prop="frameCompEnd">
45         <el-input
46           v-model="queryParams.frameCompEnd"
47           placeholder="请输入已完成末端机电配置机架数"
48           clearable
49           @keyup.enter.native="handleQuery"
50         />
51       </el-form-item>
52       <el-form-item label="云计算技术部署机架占比" prop="percentageCloud">
53         <el-input
54           v-model="queryParams.percentageCloud"
55           placeholder="请输入云计算技术部署机架占比"
56           clearable
57           @keyup.enter.native="handleQuery"
58         />
59       </el-form-item>
60       <el-form-item label="电价" prop="electricityPrice">
61         <el-input
62           v-model="queryParams.electricityPrice"
63           placeholder="请输入电价"
64           clearable
65           @keyup.enter.native="handleQuery"
66         />
67       </el-form-item>
68       <el-form-item label="数据中心年度收入(万元)" prop="annual">
69         <el-input
70           v-model="queryParams.annual"
71           placeholder="请输入数据中心年度收入(万元)"
72           clearable
73           @keyup.enter.native="handleQuery"
74         />
75       </el-form-item>
76       <el-form-item label="数据中心年度运营成本(万元)" prop="cost">
77         <el-input
78           v-model="queryParams.cost"
79           placeholder="请输入数据中心年度运营成本(万元)"
80           clearable
81           @keyup.enter.native="handleQuery"
82         />
83       </el-form-item>
84       <el-form-item label="政务业务占比" prop="bisPercentZhengwu">
85         <el-input
86           v-model="queryParams.bisPercentZhengwu"
87           placeholder="请输入政务业务占比"
88           clearable
89           @keyup.enter.native="handleQuery"
90         />
91       </el-form-item>
92       <el-form-item label="企业业务占比" prop="bisPercentQiye">
93         <el-input
94           v-model="queryParams.bisPercentQiye"
95           placeholder="请输入企业业务占比"
96           clearable
97           @keyup.enter.native="handleQuery"
98         />
99       </el-form-item>
100       <el-form-item label="金融业务占比" prop="bisPercentJinrong">
101         <el-input
102           v-model="queryParams.bisPercentJinrong"
103           placeholder="请输入金融业务占比"
104           clearable
105           @keyup.enter.native="handleQuery"
106         />
107       </el-form-item>
108       <el-form-item label="互联网.公有云占比" prop="bisPercentInternetGongyouyun">
109         <el-input
110           v-model="queryParams.bisPercentInternetGongyouyun"
111           placeholder="请输入互联网.公有云占比"
112           clearable
113           @keyup.enter.native="handleQuery"
114         />
115       </el-form-item>
116       <el-form-item label="互联网.网站占比" prop="bisPercentInternetWangzhan">
117         <el-input
118           v-model="queryParams.bisPercentInternetWangzhan"
119           placeholder="请输入互联网.网站占比"
120           clearable
121           @keyup.enter.native="handleQuery"
122         />
123       </el-form-item>
124       <el-form-item label="互联网.视频占比" prop="bisPercentInternetShiping">
125         <el-input
126           v-model="queryParams.bisPercentInternetShiping"
127           placeholder="请输入互联网.视频占比"
128           clearable
129           @keyup.enter.native="handleQuery"
130         />
131       </el-form-item>
132       <el-form-item label="互联网.ai占比" prop="bisPercentInternetAi">
133         <el-input
134           v-model="queryParams.bisPercentInternetAi"
135           placeholder="请输入互联网.ai占比"
136           clearable
137           @keyup.enter.native="handleQuery"
138         />
139       </el-form-item>
140       <el-form-item label="互联网.电商占比" prop="bisPercentInternetDianshang">
141         <el-input
142           v-model="queryParams.bisPercentInternetDianshang"
143           placeholder="请输入互联网.电商占比"
144           clearable
145           @keyup.enter.native="handleQuery"
146         />
147       </el-form-item>
148       <el-form-item label="互联网.游戏占比" prop="bisPercentInternetYouxi">
149         <el-input
150           v-model="queryParams.bisPercentInternetYouxi"
151           placeholder="请输入互联网.游戏占比"
152           clearable
153           @keyup.enter.native="handleQuery"
154         />
155       </el-form-item>
156       <el-form-item label="互联网.支付占比" prop="bisPercentInternetZhifu">
157         <el-input
158           v-model="queryParams.bisPercentInternetZhifu"
159           placeholder="请输入互联网.支付占比"
160           clearable
161           @keyup.enter.native="handleQuery"
162         />
163       </el-form-item>
164       <el-form-item label="互联网.其他占比" prop="bisPercentInternetOther">
165         <el-input
166           v-model="queryParams.bisPercentInternetOther"
167           placeholder="请输入互联网.其他占比"
168           clearable
169           @keyup.enter.native="handleQuery"
170         />
171       </el-form-item>
172       <el-form-item label="其他占比" prop="bisPercentOther">
173         <el-input
174           v-model="queryParams.bisPercentOther"
175           placeholder="请输入其他占比"
176           clearable
177           @keyup.enter.native="handleQuery"
178         />
179       </el-form-item>
180       <el-form-item label="数据中心相关发明专利、软著授权总数" prop="sumChanquan">
181         <el-input
182           v-model="queryParams.sumChanquan"
183           placeholder="请输入数据中心相关发明专利、软著授权总数"
184           clearable
185           @keyup.enter.native="handleQuery"
186         />
187       </el-form-item>
188       <el-form-item label="运维人员数量" prop="itOperation">
189         <el-input
190           v-model="queryParams.itOperation"
191           placeholder="请输入运维人员数量"
192           clearable
193           @keyup.enter.native="handleQuery"
194         />
195       </el-form-item>
196       <el-form-item label="排序" prop="sort">
197         <el-input
198           v-model="queryParams.sort"
199           placeholder="请输入排序"
200           clearable
201           @keyup.enter.native="handleQuery"
202         />
203       </el-form-item>
204       <el-form-item label="创建者" prop="createUser">
205         <el-input
206           v-model="queryParams.createUser"
207           placeholder="请输入创建者"
208           clearable
209           @keyup.enter.native="handleQuery"
210         />
211       </el-form-item>
212       <el-form-item label="更新者" prop="updateUser">
213         <el-input
214           v-model="queryParams.updateUser"
215           placeholder="请输入更新者"
216           clearable
217           @keyup.enter.native="handleQuery"
218         />
219       </el-form-item>
220       <el-form-item>
221         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
222         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
223       </el-form-item>
224     </el-form>
225
226     <el-row :gutter="10" class="mb8">
227       <el-col :span="1.5">
228         <el-button
229           type="primary"
230           plain
231           icon="el-icon-plus"
232           size="mini"
233           @click="handleAdd"
234           v-hasPermi="['bis:useInfrastructure:add']"
235         >新增</el-button>
236       </el-col>
237       <el-col :span="1.5">
238         <el-button
239           type="success"
240           plain
241           icon="el-icon-edit"
242           size="mini"
243           :disabled="single"
244           @click="handleUpdate"
245           v-hasPermi="['bis:useInfrastructure:edit']"
246         >修改</el-button>
247       </el-col>
248       <el-col :span="1.5">
249         <el-button
250           type="danger"
251           plain
252           icon="el-icon-delete"
253           size="mini"
254           :disabled="multiple"
255           @click="handleDelete"
256           v-hasPermi="['bis:useInfrastructure:remove']"
257         >删除</el-button>
258       </el-col>
259       <el-col :span="1.5">
260         <el-button
261           type="warning"
262           plain
263           icon="el-icon-download"
264           size="mini"
265           @click="handleExport"
266           v-hasPermi="['bis:useInfrastructure:export']"
267         >导出</el-button>
268       </el-col>
269       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
270     </el-row>
271
272     <el-table v-loading="loading" :data="useInfrastructureList" @selection-change="handleSelectionChange">
273       <el-table-column type="selection" width="55" align="center" />
274       <el-table-column label="序号" align="center" prop="id" />
275       <el-table-column label="数据中心ID" align="center" prop="baseId" />
276       <el-table-column label="日期节点" align="center" prop="dateNode" />
277       <el-table-column label="填表联系人" align="center" prop="formName" />
278       <el-table-column label="填表电话" align="center" prop="formTel" />
279       <el-table-column label="已完成基础机电配置机架数" align="center" prop="frameCompBase" />
280       <el-table-column label="已完成末端机电配置机架数" align="center" prop="frameCompEnd" />
281       <el-table-column label="已上电机架数" align="center" prop="frameElectricity" />
282       <el-table-column label="云计算技术部署机架占比" align="center" prop="percentageCloud" />
283       <el-table-column label="电价" align="center" prop="electricityPrice" />
284       <el-table-column label="数据中心年度收入(万元)" align="center" prop="annual" />
285       <el-table-column label="数据中心年度运营成本(万元)" align="center" prop="cost" />
286       <el-table-column label="政务业务占比" align="center" prop="bisPercentZhengwu" />
287       <el-table-column label="企业业务占比" align="center" prop="bisPercentQiye" />
288       <el-table-column label="金融业务占比" align="center" prop="bisPercentJinrong" />
289       <el-table-column label="互联网.公有云占比" align="center" prop="bisPercentInternetGongyouyun" />
290       <el-table-column label="互联网.网站占比" align="center" prop="bisPercentInternetWangzhan" />
291       <el-table-column label="互联网.视频占比" align="center" prop="bisPercentInternetShiping" />
292       <el-table-column label="互联网.ai占比" align="center" prop="bisPercentInternetAi" />
293       <el-table-column label="互联网.电商占比" align="center" prop="bisPercentInternetDianshang" />
294       <el-table-column label="互联网.游戏占比" align="center" prop="bisPercentInternetYouxi" />
295       <el-table-column label="互联网.支付占比" align="center" prop="bisPercentInternetZhifu" />
296       <el-table-column label="互联网.其他占比" align="center" prop="bisPercentInternetOther" />
297       <el-table-column label="其他占比" align="center" prop="bisPercentOther" />
298       <el-table-column label="数据中心相关发明专利、软著授权总数" align="center" prop="sumChanquan" />
299       <el-table-column label="运维人员数量" align="center" prop="itOperation" />
300       <el-table-column label="排序" align="center" prop="sort" />
301       <el-table-column label="创建者" align="center" prop="createUser" />
302       <el-table-column label="更新者" align="center" prop="updateUser" />
303       <el-table-column label="管理员备注" align="center" prop="remark" />
304       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
305         <template slot-scope="scope">
306           <el-button
307             size="mini"
308             type="text"
309             icon="el-icon-edit"
310             @click="handleUpdate(scope.row)"
311             v-hasPermi="['bis:useInfrastructure:edit']"
312           >修改</el-button>
313           <el-button
314             size="mini"
315             type="text"
316             icon="el-icon-delete"
317             @click="handleDelete(scope.row)"
318             v-hasPermi="['bis:useInfrastructure:remove']"
319           >删除</el-button>
320         </template>
321       </el-table-column>
322     </el-table>
323     
324     <pagination
325       v-show="total>0"
326       :total="total"
327       :page.sync="queryParams.pageNum"
328       :limit.sync="queryParams.pageSize"
329       @pagination="getList"
330     />
331
332     <!-- 添加或修改基础设施信息对话框 -->
333     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
334       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
335         <el-form-item label="数据中心ID" prop="baseId">
336           <el-input v-model="form.baseId" placeholder="请输入数据中心ID" />
337         </el-form-item>
338         <el-form-item label="日期节点" prop="dateNode">
339           <el-input v-model="form.dateNode" placeholder="请输入日期节点" />
340         </el-form-item>
341         <el-form-item label="填表联系人" prop="formName">
342           <el-input v-model="form.formName" placeholder="请输入填表联系人" />
343         </el-form-item>
344         <el-form-item label="填表电话" prop="formTel">
345           <el-input v-model="form.formTel" placeholder="请输入填表电话" />
346         </el-form-item>
347         <el-form-item label="已完成基础机电配置机架数" prop="frameCompBase">
348           <el-input v-model="form.frameCompBase" placeholder="请输入已完成基础机电配置机架数" />
349         </el-form-item>
350         <el-form-item label="已完成末端机电配置机架数" prop="frameCompEnd">
351           <el-input v-model="form.frameCompEnd" placeholder="请输入已完成末端机电配置机架数" />
352         </el-form-item>
353         <el-form-item label="云计算技术部署机架占比" prop="percentageCloud">
354           <el-input v-model="form.percentageCloud" placeholder="请输入云计算技术部署机架占比" />
355         </el-form-item>
356         <el-form-item label="电价" prop="electricityPrice">
357           <el-input v-model="form.electricityPrice" placeholder="请输入电价" />
358         </el-form-item>
359         <el-form-item label="数据中心年度收入(万元)" prop="annual">
360           <el-input v-model="form.annual" placeholder="请输入数据中心年度收入(万元)" />
361         </el-form-item>
362         <el-form-item label="数据中心年度运营成本(万元)" prop="cost">
363           <el-input v-model="form.cost" placeholder="请输入数据中心年度运营成本(万元)" />
364         </el-form-item>
365         <el-form-item label="政务业务占比" prop="bisPercentZhengwu">
366           <el-input v-model="form.bisPercentZhengwu" placeholder="请输入政务业务占比" />
367         </el-form-item>
368         <el-form-item label="企业业务占比" prop="bisPercentQiye">
369           <el-input v-model="form.bisPercentQiye" placeholder="请输入企业业务占比" />
370         </el-form-item>
371         <el-form-item label="金融业务占比" prop="bisPercentJinrong">
372           <el-input v-model="form.bisPercentJinrong" placeholder="请输入金融业务占比" />
373         </el-form-item>
374         <el-form-item label="互联网.公有云占比" prop="bisPercentInternetGongyouyun">
375           <el-input v-model="form.bisPercentInternetGongyouyun" placeholder="请输入互联网.公有云占比" />
376         </el-form-item>
377         <el-form-item label="互联网.网站占比" prop="bisPercentInternetWangzhan">
378           <el-input v-model="form.bisPercentInternetWangzhan" placeholder="请输入互联网.网站占比" />
379         </el-form-item>
380         <el-form-item label="互联网.视频占比" prop="bisPercentInternetShiping">
381           <el-input v-model="form.bisPercentInternetShiping" placeholder="请输入互联网.视频占比" />
382         </el-form-item>
383         <el-form-item label="互联网.ai占比" prop="bisPercentInternetAi">
384           <el-input v-model="form.bisPercentInternetAi" placeholder="请输入互联网.ai占比" />
385         </el-form-item>
386         <el-form-item label="互联网.电商占比" prop="bisPercentInternetDianshang">
387           <el-input v-model="form.bisPercentInternetDianshang" placeholder="请输入互联网.电商占比" />
388         </el-form-item>
389         <el-form-item label="互联网.游戏占比" prop="bisPercentInternetYouxi">
390           <el-input v-model="form.bisPercentInternetYouxi" placeholder="请输入互联网.游戏占比" />
391         </el-form-item>
392         <el-form-item label="互联网.支付占比" prop="bisPercentInternetZhifu">
393           <el-input v-model="form.bisPercentInternetZhifu" placeholder="请输入互联网.支付占比" />
394         </el-form-item>
395         <el-form-item label="互联网.其他占比" prop="bisPercentInternetOther">
396           <el-input v-model="form.bisPercentInternetOther" placeholder="请输入互联网.其他占比" />
397         </el-form-item>
398         <el-form-item label="其他占比" prop="bisPercentOther">
399           <el-input v-model="form.bisPercentOther" placeholder="请输入其他占比" />
400         </el-form-item>
401         <el-form-item label="数据中心相关发明专利、软著授权总数" prop="sumChanquan">
402           <el-input v-model="form.sumChanquan" placeholder="请输入数据中心相关发明专利、软著授权总数" />
403         </el-form-item>
404         <el-form-item label="运维人员数量" prop="itOperation">
405           <el-input v-model="form.itOperation" placeholder="请输入运维人员数量" />
406         </el-form-item>
407         <el-form-item label="排序" prop="sort">
408           <el-input v-model="form.sort" placeholder="请输入排序" />
409         </el-form-item>
410         <el-form-item label="创建者" prop="createUser">
411           <el-input v-model="form.createUser" placeholder="请输入创建者" />
412         </el-form-item>
413         <el-form-item label="更新者" prop="updateUser">
414           <el-input v-model="form.updateUser" placeholder="请输入更新者" />
415         </el-form-item>
416         <el-form-item label="管理员备注" prop="remark">
417           <el-input v-model="form.remark" placeholder="请输入管理员备注" />
418         </el-form-item>
419       </el-form>
420       <div slot="footer" class="dialog-footer">
421         <el-button type="primary" @click="submitForm">确 定</el-button>
422         <el-button @click="cancel">取 消</el-button>
423       </div>
424     </el-dialog>
425   </div>
426 </template>
427
428 <script>
429 import { listUseInfrastructure, getUseInfrastructure, delUseInfrastructure, addUseInfrastructure, updateUseInfrastructure } from "@/api/bis/useInfrastructure";
430
431 export default {
432   name: "UseInfrastructure",
433   data() {
434     return {
435       // 遮罩层
436       loading: true,
437       // 选中数组
438       ids: [],
439       // 非单个禁用
440       single: true,
441       // 非多个禁用
442       multiple: true,
443       // 显示搜索条件
444       showSearch: true,
445       // 总条数
446       total: 0,
447       // 基础设施信息表格数据
448       useInfrastructureList: [],
449       // 弹出层标题
450       title: "",
451       // 是否显示弹出层
452       open: false,
453       // 查询参数
454       queryParams: {
455         pageNum: 1,
456         pageSize: 10,
457         baseId: null,
458         dateNode: null,
459         formName: null,
460         formTel: null,
461         frameCompBase: null,
462         frameCompEnd: null,
463         frameElectricity: null,
464         percentageCloud: null,
465         electricityPrice: null,
466         annual: null,
467         cost: null,
468         bisPercentZhengwu: null,
469         bisPercentQiye: null,
470         bisPercentJinrong: null,
471         bisPercentInternetGongyouyun: null,
472         bisPercentInternetWangzhan: null,
473         bisPercentInternetShiping: null,
474         bisPercentInternetAi: null,
475         bisPercentInternetDianshang: null,
476         bisPercentInternetYouxi: null,
477         bisPercentInternetZhifu: null,
478         bisPercentInternetOther: null,
479         bisPercentOther: null,
480         sumChanquan: null,
481         itOperation: null,
482         sort: null,
483         createUser: null,
484         updateUser: null,
485       },
486       // 表单参数
487       form: {},
488       // 表单校验
489       rules: {
490         createUser: [
491           { required: true, message: "创建者不能为空", trigger: "blur" }
492         ],
493       }
494     };
495   },
496   created() {
497     this.getList();
498   },
499   methods: {
500     /** 查询基础设施信息列表 */
501     getList() {
502       this.loading = true;
503       listUseInfrastructure(this.queryParams).then(response => {
504         this.useInfrastructureList = response.rows;
505         this.total = response.total;
506         this.loading = false;
507       });
508     },
509     // 取消按钮
510     cancel() {
511       this.open = false;
512       this.reset();
513     },
514     // 表单重置
515     reset() {
516       this.form = {
517         id: null,
518         baseId: null,
519         dateNode: null,
520         formName: null,
521         formTel: null,
522         frameCompBase: null,
523         frameCompEnd: null,
524         frameElectricity: null,
525         percentageCloud: null,
526         electricityPrice: null,
527         annual: null,
528         cost: null,
529         bisPercentZhengwu: null,
530         bisPercentQiye: null,
531         bisPercentJinrong: null,
532         bisPercentInternetGongyouyun: null,
533         bisPercentInternetWangzhan: null,
534         bisPercentInternetShiping: null,
535         bisPercentInternetAi: null,
536         bisPercentInternetDianshang: null,
537         bisPercentInternetYouxi: null,
538         bisPercentInternetZhifu: null,
539         bisPercentInternetOther: null,
540         bisPercentOther: null,
541         sumChanquan: null,
542         itOperation: null,
543         sort: null,
544         createTime: null,
545         updateTime: null,
546         createUser: null,
547         updateUser: null,
548         remark: null
549       };
550       this.resetForm("form");
551     },
552     /** 搜索按钮操作 */
553     handleQuery() {
554       this.queryParams.pageNum = 1;
555       this.getList();
556     },
557     /** 重置按钮操作 */
558     resetQuery() {
559       this.resetForm("queryForm");
560       this.handleQuery();
561     },
562     // 多选框选中数据
563     handleSelectionChange(selection) {
564       this.ids = selection.map(item => item.id)
565       this.single = selection.length!==1
566       this.multiple = !selection.length
567     },
568     /** 新增按钮操作 */
569     handleAdd() {
570       this.reset();
571       this.open = true;
572       this.title = "添加基础设施信息";
573     },
574     /** 修改按钮操作 */
575     handleUpdate(row) {
576       this.reset();
577       const id = row.id || this.ids
578       getUseInfrastructure(id).then(response => {
579         this.form = response.data;
580         this.open = true;
581         this.title = "修改基础设施信息";
582       });
583     },
584     /** 提交按钮 */
585     submitForm() {
586       this.$refs["form"].validate(valid => {
587         if (valid) {
588           if (this.form.id != null) {
589             updateUseInfrastructure(this.form).then(response => {
590               this.$modal.msgSuccess("修改成功");
591               this.open = false;
592               this.getList();
593             });
594           } else {
595             addUseInfrastructure(this.form).then(response => {
596               this.$modal.msgSuccess("新增成功");
597               this.open = false;
598               this.getList();
599             });
600           }
601         }
602       });
603     },
604     /** 删除按钮操作 */
605     handleDelete(row) {
606       const ids = row.id || this.ids;
607       this.$modal.confirm('是否确认删除基础设施信息编号为"' + ids + '"的数据项?').then(function() {
608         return delUseInfrastructure(ids);
609       }).then(() => {
610         this.getList();
611         this.$modal.msgSuccess("删除成功");
612       }).catch(() => {});
613     },
614     /** 导出按钮操作 */
615     handleExport() {
616       this.download('bis/useInfrastructure/export', {
617         ...this.queryParams
618       }, `useInfrastructure_${new Date().getTime()}.xlsx`)
619     }
620   }
621 };
622 </script>