Skip to content

I
IT-monitor
Commit 46fb1aac authored by Asjoker's avatar Asjoker
Browse files
Options

feat: 资产管理-统计报表

parent 86390fa2
Hide whitespace changes
Inline Side-by-side
Showing with 857 additions and 47 deletions
src/views/assetManagement/assetOverView.vue
View file @ 46fb1aac
......@@ -23,12 +23,12 @@
<span>资产总数</span>
<span style="float: right">181个</span>
</div>
<el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px"></el-progress>
<el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<span>在用</span>
<span style="float: right">22个</span>
</div>
<el-progress :percentage="12" :show-text="false"></el-progress>
<el-progress :percentage="12" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>12.15%</span>
</div>
......@@ -36,7 +36,7 @@
<span>闲置</span>
<span style="float: right">0个</span>
</div>
<el-progress :percentage="0" :show-text="false"></el-progress>
<el-progress :percentage="0" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>0%</span>
</div>
......@@ -60,12 +60,12 @@
<span>故障总数</span>
<span style="float: right">10个</span>
</div>
<el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px"></el-progress>
<el-progress :percentage="100" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<span>已处理</span>
<span style="float: right">4个</span>
</div>
<el-progress :percentage="40" :show-text="false"></el-progress>
<el-progress :percentage="40" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>40.00%</span>
</div>
......@@ -73,7 +73,7 @@
<span>未处理</span>
<span style="float: right">6个</span>
</div>
<el-progress :percentage="60" :show-text="false"></el-progress>
<el-progress :percentage="60" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>60.00%</span>
</div>
......@@ -97,12 +97,12 @@
<span>报修总数</span>
<span style="float: right">3个</span>
</div>
<el-progress :percentage="66.67" :show-text="false" style="margin-bottom: 15px"></el-progress>
<el-progress :percentage="66.67" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<span>已处理</span>
<span style="float: right">2个</span>
</div>
<el-progress :percentage="66.67" :show-text="false"></el-progress>
<el-progress :percentage="66.67" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>66.67%</span>
</div>
......@@ -110,7 +110,7 @@
<span>未处理</span>
<span style="float: right">1个</span>
</div>
<el-progress :percentage="33.33" :show-text="false"></el-progress>
<el-progress :percentage="33.33" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>33.33%</span>
</div>
......@@ -134,12 +134,12 @@
<span>资产总数</span>
<span style="float: right">6个</span>
</div>
<el-progress :percentage="33.33" :show-text="false" style="margin-bottom: 15px"></el-progress>
<el-progress :percentage="33.33" :show-text="false" style="margin-bottom: 15px" />
<div style="width: 100%;font-size: 14px">
<span>已处理</span>
<span style="float: right">2个</span>
</div>
<el-progress :percentage="33.33" :show-text="false"></el-progress>
<el-progress :percentage="33.33" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>33.33%</span>
</div>
......@@ -147,7 +147,7 @@
<span>未处理</span>
<span style="float: right">4个</span>
</div>
<el-progress :percentage="66.67" :show-text="false"></el-progress>
<el-progress :percentage="66.67" :show-text="false" />
<div style="width: 100%;font-size: 14px;margin-bottom: 10px">
<span>66.67%</span>
</div>
......@@ -224,41 +224,6 @@
</el-collapse-item>
</el-collapse>
<el-dialog :visible.sync="open" title="添加报告" width="700px">
<el-form label-width="110px">
<el-form-item label="报告标题">
<el-input />
</el-form-item>
<el-form-item label="每页显示报告数">
<el-input />
</el-form-item>
<el-form-item label="选择设备列表">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/>
</div>
</el-form-item>
<el-form-item label="选择监测点类型">
<span style="font-weight: bold;width: 100%">监测点类型</span>
<br>
<el-select />
<br>
<span style="font-weight: bold">监测指标</span>
<br>
<el-select placeholder="请选择" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</div>
......
src/views/assetManagement/statisticReport.vue 0 → 100644
View file @ 46fb1aac
<template>
<div id="container_max" class="assetListMoudle">
<div class="assetListHead">
<!-- <div class="assetListTitle">资产清单</div>-->
<el-row>
<el-col :span="6" style="min-height:1px;" />
<el-col :span="18">
<el-select v-show="currentNode === 11" v-model="sortSelect" @change="changeSort">
<el-option value="1" label="按资产分类" />
<el-option value="2" label="按资产状态" />
<el-option value="3" label="按维保状态" />
<el-option value="4" label="按使用部门" />
<el-option value="5" label="按所属公司" />
<el-option value="6" label="按采购时间" />
</el-select>
<el-select v-show="currentNode === 12" v-model="dateSelect" @change="changeDate">
<el-option value="1" label="最近一个月" />
<el-option value="2" label="最近三个月" />
<el-option value="3" label="最近六个月" />
<el-option value="4" label="最近一年" />
<el-option value="5" label="最近三年" />
<el-option value="6" label="自定义时间" />
</el-select>
<div class="warnBtns">
<el-button type="primary" @click="handleExport">导出报表</el-button>
</div>
</el-col>
</el-row>
</div>
<el-divider />
<div class="assetListBody">
<el-row :gutter="12">
<el-col :span="6">
<div class="leftTop">
<span class="leftTitle">
报表类型
</span>
<img :src="addIcon" class="leftImg" @click="leftAdd">
</div>
<div class="groupList">
<el-tree
:data="data"
node-key="id"
:default-expanded-keys="[1, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
:expand-on-click-node="false"
@node-click="clickNode"
/>
</div>
</el-col>
<el-col :span="18">
<el-table
v-if="currentNode === 11"
:data="tableData"
border
style="width: 100%;padding-top: 10px"
>
<el-table-column :label="sorName" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.sortName }}
</template>
</el-table-column>
<el-table-column label="资产数量" prop="asset" show-overflow-tooltip />
<el-table-column label="在用数量" prop="using" show-overflow-tooltip />
<el-table-column label="闲置数量" prop="unused" show-overflow-tooltip />
<el-table-column label="维修数量" prop="repairing" show-overflow-tooltip />
<el-table-column label="维修到期数量" prop="repairingOn" show-overflow-tooltip />
</el-table>
<el-table
v-if="currentNode === 12"
:data="tableData2"
border
style="width: 100%;padding-top: 10px"
>
<el-table-column label="资产编号" width="600" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.code }}
</template>
</el-table-column>
<el-table-column label="资产名称" prop="name" show-overflow-tooltip />
<el-table-column label="资产分类" prop="sort" show-overflow-tooltip />
<el-table-column label="状态" prop="status" show-overflow-tooltip />
<el-table-column label="报修到期日期" prop="repairingDate" show-overflow-tooltip />
</el-table>
<el-table
v-if="currentNode === 13"
:data="tableData3"
border
style="width: 100%;padding-top: 10px"
>
<el-table-column label="资产编号" width="600" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.code }}
</template>
</el-table-column>
<el-table-column label="资产名称" prop="name" show-overflow-tooltip />
<el-table-column label="资产分类" prop="sort" show-overflow-tooltip />
<el-table-column label="状态" prop="status" show-overflow-tooltip />
<el-table-column label="报修到期日期" prop="repairingDate" show-overflow-tooltip />
</el-table>
<el-table
v-if="currentNode === 14"
:data="tableData4"
border
style="width: 100%;padding-top: 10px"
>
<el-table-column label="资产编号" width="600" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.code }}
</template>
</el-table-column>
<el-table-column label="资产名称" prop="name" show-overflow-tooltip />
<el-table-column label="资产分类" prop="sort" show-overflow-tooltip />
<el-table-column label="状态" prop="status" show-overflow-tooltip />
<el-table-column label="报修到期日期" prop="repairingDate" show-overflow-tooltip />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
</el-col>
</el-row>
</div>
<el-dialog :visible.sync="open" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'AssetList',
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 10
},
total: 6,
addAssetDialog: false,
tableData: [
{
sortName: '服务器',
asset: '175',
using: '20',
unused: '0',
repairing: '1',
repairingOn: '0'
},
{
sortName: '网络',
asset: '3',
using: '1',
unused: '0',
repairing: '1',
repairingOn: '3'
},
{
sortName: '摄像机',
asset: '4',
using: '90',
unused: '1',
repairing: '1',
repairingOn: '0'
},
{
sortName: '物联',
asset: '1',
using: '0',
unused: '0',
repairing: '1',
repairingOn: '1'
},
{
sortName: '电表',
asset: '20',
using: '20',
unused: '0',
repairing: '0',
repairingOn: '0'
},
{
sortName: 'dvr',
asset: '0',
using: '0',
unused: '0',
repairing: '0',
repairingOn: '0'
}
],
tableData2: [
{
code: '摄像机-20220511-0001',
name: '摄像机A',
sort: '摄像机',
status: '在用',
repairingDate: '-'
},
{
code: '摄像机-20220511-0002',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-20220511-0001',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-20220519-0003',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
}
],
tableData3: [
{
code: '摄像机-0406105456-0142',
name: '摄像机A',
sort: '摄像机',
status: '在用',
repairingDate: '-'
},
{
code: '摄像机-0406105535-0144',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-0406105555-0146',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-0406105555-0146',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
},
{
code: '摄像机-0406105618-0148',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-0406105652-0150',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-0406105729-0152',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
},
{
code: '摄像机-0406105748-0154',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-0406105812-0156',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-0406105839-0158',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
}
],
tableData4: [
{
code: '物联-0406105555-0146',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-0406105555-0146',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
},
{
code: '摄像机-0406105618-0148',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-0406105652-0150',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-0406105729-0152',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-0406105839-0158',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
},
{
code: '摄像机-0406105748-0154',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-0406105812-0156',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
}
],
open: false,
deleteIcon: require('@/assets/image/delete.png'),
updateIcon: require('@/assets/image/edit.png'),
data: [
{
id: 1,
label: '报表模板',
children: [
{
id: 11,
label: '资产分类汇总'
},
{
id: 12,
label: '近期新增的资产'
},
{
id: 13,
label: '待入库资产'
},
{
id: 14,
label: '维保到期资产'
}
]
},
{
id: 2,
label: '我的资产'
}
],
currentNode: 11,
sorName: '资产分类名称',
sortSelect: '1',
dateSelect: '1',
defaultProps: {
children: 'children',
label: 'label'
},
leftAddForm: {
value: '',
value2: '',
value3: '',
value4: '',
value5: ''
},
leftAddDialog: false,
addIcon: require('@/assets/image/add_btn.png')
}
},
created() {
},
mounted() {
window.handleShowAdd = this.handleShowAdd
this.handleExpand() // 全屏
},
methods: {
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
changeSort(data) {
if (data === '1') {
this.total = 6
this.sorName = '资产分类名称'
this.tableData = [
{
sortName: '服务器',
asset: '175',
using: '20',
unused: '0',
repairing: '1',
repairingOn: '0'
},
{
sortName: '网络',
asset: '3',
using: '1',
unused: '0',
repairing: '1',
repairingOn: '3'
},
{
sortName: '摄像机',
asset: '4',
using: '90',
unused: '1',
repairing: '1',
repairingOn: '0'
},
{
sortName: '物联',
asset: '1',
using: '0',
unused: '0',
repairing: '1',
repairingOn: '1'
},
{
sortName: '电表',
asset: '20',
using: '20',
unused: '0',
repairing: '0',
repairingOn: '0'
},
{
sortName: 'dvr',
asset: '0',
using: '0',
unused: '0',
repairing: '0',
repairingOn: '0'
}
]
} else if (data === '2') {
this.total = 3
this.sorName = '资产状态名称'
this.tableData = [
{
sortName: '在使用',
asset: '388',
using: '388',
unused: '0',
repairing: '1',
repairingOn: '0'
},
{
sortName: '未入库',
asset: '157',
using: '0',
unused: '0',
repairing: '0',
repairingOn: '3'
},
{
sortName: '闲置',
asset: '0',
using: '0',
unused: '0',
repairing: '0',
repairingOn: '0'
}
]
} else if (data === '3') {
this.total = 2
this.sorName = '维保名称'
this.tableData = [
{
sortName: '维修中',
asset: '12',
using: '0',
unused: '0',
repairing: '12',
repairingOn: '0'
},
{
sortName: '已完成',
asset: '1',
using: '0',
unused: '0',
repairing: '0',
repairingOn: '1'
}
]
} else if (data === '4') {
this.total = 2
this.sorName = '部门名称'
this.tableData = [
{
sortName: '后勤部',
asset: '380',
using: '369',
unused: '0',
repairing: '11',
repairingOn: '1'
},
{
sortName: '维修部',
asset: '12',
using: '0',
unused: '0',
repairing: '12',
repairingOn: '0'
}
]
} else if (data === '5') {
this.total = 1
this.sorName = '所属公司'
this.tableData = [
{
sortName: '默认公司',
asset: '380',
using: '369',
unused: '0',
repairing: '11',
repairingOn: '1'
}
]
} else if (data === '6') {
this.total = 2
this.sorName = '采购时间'
this.tableData = [
{
sortName: '2022-01',
asset: '380',
using: '369',
unused: '0',
repairing: '11',
repairingOn: '1'
},
{
sortName: '2022-05',
asset: '12',
using: '12',
unused: '0',
repairing: '0',
repairingOn: '0'
}
]
}
},
changeDate(data) {
console.log('is data', data)
if (data === '6') {
this.open = !this.open
} else if (data === '1') {
this.total = 4
this.tableData2 = [
{
code: '摄像机-20220511-0001',
name: '摄像机A',
sort: '摄像机',
status: '在用',
repairingDate: '-'
},
{
code: '摄像机-20220511-0002',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-20220511-0001',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-20220519-0003',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
}
]
} else if (['2', '3', '4', '5'].indexOf(data)) {
this.total = 6
this.tableData2 = [
{
code: '摄像机-20220511-0001',
name: '摄像机A',
sort: '摄像机',
status: '在用',
repairingDate: '-'
},
{
code: '摄像机-20220511-0002',
name: '物联',
sort: '摄像机',
status: '在用',
repairingDate: '2022-05-12'
},
{
code: '物联-20220511-0001',
name: '物联甲',
sort: '物联',
status: '未入库',
repairingDate: '-'
},
{
code: '网络-20220519-0003',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
},
{
code: '摄像机-20220518-0001',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '2022-05-20'
},
{
code: '网络-20220526-0003',
name: '网络',
sort: '网络',
status: '未入库',
repairingDate: '-'
}
]
}
},
handleExport() {
window.location.href = process.env.BASE_URL + 'exportFile.xls'
},
clickNode(data) {
if (['11', '12', '13', '14'].indexOf(data.id)) {
this.currentNode = data.id
}
},
mouseenter(data) {
this.$set(data, 'show', true)
},
mouseleave(data) {
this.$set(data, 'show', false)
},
handleShowAdd() {
this.$router.push({
path: '/assetManagement/addAsset'
})
},
addAsset() {
this.addAssetDialog = true
},
checkDetails() {
this.$router.push({
path: '/assetManagement/assetListDetails'
})
},
updateRow() {
this.$router.push({
path: '/assetManagement/addAsset'
})
},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
closeLeftDialog() {
this.leftAddDialog = false
},
leftAdd() {
this.$router.push({
path: '/assetManagement/compQuery/queryPage'
})
},
refresh() {
window.location.reload() // 刷新页面
},
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
}
}
}
</script>
<style lang="scss">
.assetListMoudle{
.el-divider--horizontal{
padding-top: 10px;
margin: 0!important;
height: 14px!important;
background-color: #F1F1F1!important;
}
.assetListHead{
height: 58px;
padding: 15px 20px 10px 20px;
//background-color: #edeef3 !important;
//border-bottom: 1px solid #DBDDE3;
.assetListTitle{
float: left;
font-size: 24px;
font-weight: bold;
margin-left: 20px!important;
letter-spacing: 2px;
color: #333333;
}
.warnBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.assetListBody{
padding: 10px;
.leftTop{
width: 100%;
height: 41px;
background: #fff;
line-height: 41px;
border-bottom: 1px solid #dbdbdb;
border-top-left-radius: 5px;
.leftTitle{
padding-left: 15px;
font-size: 14px;
}
.leftImg{
width: 20px;
float: right;
margin: 10px;
cursor: pointer;
}
}
.groupList{
width: calc(100%);
overflow: auto;
display: inline-block;
padding-bottom: 50px;
font-size: 12px;
.treeIcon{
width: 17px;
height: 17px;
}
.treeIcon2{
margin-left: 10px;
float: right;
width: 17px;
height: 17px;
}
}
}
}
.addAssetClass{
.header-tab{
padding: 10px;
}
.card{
cursor: pointer;
width: 200px;
height: 80px;
border: 1px solid #ccc;
display: inline-block;
margin: 0 10px;
padding: 15px 0;
.textNme{
display: inline-block;
margin-left: 50px;
margin-top: 15px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment