|
|
@@ -3,54 +3,110 @@
|
|
|
<el-row :gutter="12">
|
|
|
<el-col :span="24">
|
|
|
<div class="filter-container">
|
|
|
- <el-cascader
|
|
|
+ <!-- <el-cascader
|
|
|
class="filter-item fl form-search-input"
|
|
|
@change="handleSearch"
|
|
|
- placeholder="请选择所属风场"
|
|
|
+ placeholder="请选择所属部门"
|
|
|
:options="departments"
|
|
|
v-model="queryParam.depart_id"
|
|
|
:props="departProps"
|
|
|
filterable
|
|
|
clearable>
|
|
|
- </el-cascader>
|
|
|
-
|
|
|
- <el-input
|
|
|
- v-model="queryParam.creator"
|
|
|
- placeholder="安装人员"
|
|
|
- clearable
|
|
|
- @change="handleSearch"
|
|
|
- class="filter-item form-search-input fl"
|
|
|
- />
|
|
|
+ </el-cascader> -->
|
|
|
+ <el-select v-model="queryParam.device_type" class="filter-item form-search-input fl" placeholder="请选择设备类型" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in deviceTypes"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.text"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
|
|
|
<el-button class="filter-item fl" icon="el-icon-search" @click="handleSearch">
|
|
|
搜索
|
|
|
</el-button>
|
|
|
- <el-button class="filter-item fl" icon="el-icon-refresh" @click="handleRefresh">
|
|
|
- 重置
|
|
|
- </el-button>
|
|
|
+
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <!-- 图表 -->
|
|
|
+
|
|
|
<div class="charts">
|
|
|
<normal-card shadow="always" >
|
|
|
<template slot="content">
|
|
|
- <bar-pie-chart
|
|
|
- :barOptions="barOptions"
|
|
|
- :pieOptions="pieOptions"
|
|
|
- />
|
|
|
+
|
|
|
+
|
|
|
+ <div class="pie-left-content">
|
|
|
+ <base-pie-chart
|
|
|
+ :options="pieOptionsA"
|
|
|
+ height="300px"
|
|
|
+ width="100%"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="pie-right-content" style="padding-top:40px;">
|
|
|
+ <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
|
|
|
+ <div class="content-item bg-color1" @click="showTable(1)">有效期内15台 <span class="triangle2"></span> </div>
|
|
|
+ <div class="content-item bg-color3" @click="showTable(2)">已失效4台 (小于15天)<span class="triangle4"></span> </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pie-left-content">
|
|
|
+ <base-pie-chart
|
|
|
+ :options="pieOptionsC"
|
|
|
+ height="300px"
|
|
|
+ width="100%"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="pie-right-content" style="padding-top:40px;">
|
|
|
+
|
|
|
+ <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
|
|
|
+ <div class="content-item bg-color1" @click="showTable(3)">已维护14台<span class="triangle2"></span> </div>
|
|
|
+ <div class="content-item bg-color3" @click="showTable(4)">未维护5台<span class="triangle4"></span> </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pie-left-content">
|
|
|
+ <base-pie-chart
|
|
|
+ :options="pieOptionsB"
|
|
|
+ height="300px"
|
|
|
+ width="100%"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="pie-right-content">
|
|
|
+
|
|
|
+ <div class="content-item-head">有效期内30台 <span class="triangle"></span> </div>
|
|
|
+ <div class="content-item bg-color1" @click="showTable(5)"> 有效使用20台(大于45天) <span class="triangle2"></span> </div>
|
|
|
+ <div class="content-item bg-color2" @click="showTable(6)"> 警告失效4台(15天~45天) <span class="triangle3"></span> </div>
|
|
|
+ <div class="content-item bg-color3" @click="showTable(7)"> 失效6台(0~15天) <span class="triangle4"></span> </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</normal-card>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
- <!-- 表格 -->
|
|
|
- <div class="datatable">
|
|
|
- <div class="table-title">维保设备</div>
|
|
|
- <el-table :data="tableData" :span-method="objectSpanMethod" row-key="id" fit border width="100%" >
|
|
|
- <el-table-column label="设备类型" prop="type" align="center" fixed="left"/>
|
|
|
- <el-table-column label="状态" prop="name" align="center" fixed="left"/>
|
|
|
- <el-table-column label="数量" prop="value" align="center" />
|
|
|
+ <div class="datatable" v-if="tableA">
|
|
|
+ <div class="table-title">{{tableTitle}}</div>
|
|
|
+ <el-table :data="tableData" row-key="id" fit border width="100%" >
|
|
|
+ <el-table-column type="index" width="50" label="序号" align="center"/>
|
|
|
+ <el-table-column label="设备名称" prop="name" align="center"/>
|
|
|
+ <el-table-column label="出厂编号" prop="number" align="center" />
|
|
|
+ <el-table-column label="上次所在位置" prop="address" align="center" />
|
|
|
+ <el-table-column label="有效截止时间" prop="online_time" align="center" />
|
|
|
+ <el-table-column label="未使用天数" prop="unused_days" align="center" />
|
|
|
+ <el-table-column label="备注" prop="remarks" align="center" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="datatable" v-if="tableC">
|
|
|
+ <div class="table-title">{{tableTitle}}</div>
|
|
|
+ <el-table :data="tableData" row-key="id" fit border width="100%" >
|
|
|
+ <el-table-column type="index" width="50" label="序号" align="center"/>
|
|
|
+ <el-table-column label="设备名称" prop="name" align="center"/>
|
|
|
+ <el-table-column label="出厂编号" prop="number" align="center" />
|
|
|
+ <el-table-column label="上次所在位置" prop="address" align="center" />
|
|
|
+ <el-table-column label="上次维护时间" prop="online_time" align="center" />
|
|
|
+ <el-table-column label="距离下次天数" prop="unused_days" align="center" />
|
|
|
+ <el-table-column label="备注" prop="remarks" align="center" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
|
|
|
@@ -58,30 +114,35 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import NormalCard from '@/components/Card/NormalCard';
|
|
|
-import BarPieChart from '../components/BarPieChart.vue';
|
|
|
-
|
|
|
+import BasePieChart from '@/components/Charts/BasePieChart';
|
|
|
import formOperate from "@/layout/rl-list-operate/rlListOperate";
|
|
|
export default {
|
|
|
mixins: [formOperate],
|
|
|
- name:'total_alarmDeviceCount',
|
|
|
- components: { NormalCard, BarPieChart },
|
|
|
+ name:'total_hydraulicCount',
|
|
|
+ components: { NormalCard, BasePieChart },
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ // url: "report/hydraulicCount",
|
|
|
url: "report/alarmDeviceCount",
|
|
|
data: [],
|
|
|
+ tableA:true,
|
|
|
+ tableC:false,
|
|
|
tableData: [],
|
|
|
- // 图形配置
|
|
|
- barXData: [],
|
|
|
- barSeriesData: [],
|
|
|
- barOptions: {},
|
|
|
+ tableTitle:'有效期内设备列表(A)',
|
|
|
+ deviceTypes:[],
|
|
|
+
|
|
|
+
|
|
|
pieSeriesData: [],
|
|
|
- pieOptions: {},
|
|
|
+ pieOptionsA: {},
|
|
|
+ pieOptionsB: {},
|
|
|
+ pieOptionsC: {},
|
|
|
|
|
|
+
|
|
|
departments: [],
|
|
|
queryParam:{
|
|
|
depart_id:'',
|
|
|
- creator:'',
|
|
|
+ device_type:'0',
|
|
|
},
|
|
|
departProps: {
|
|
|
label: "department_name",
|
|
|
@@ -93,9 +154,11 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
created: function() {
|
|
|
-
|
|
|
- // 获取所属单位
|
|
|
- this.getDepartOptions();
|
|
|
+ this.$http.post("sysDictData/getOptions", { type: "DeviceType" }).then(resp => {
|
|
|
+ this.deviceTypes = resp.data
|
|
|
+ });
|
|
|
+ // 获取所属单位
|
|
|
+ // this.getDepartOptions();
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -104,18 +167,62 @@ export default {
|
|
|
*/
|
|
|
afterGetList() {
|
|
|
this.tableData=this.data.list
|
|
|
+ this.tableTitle='有效期内设备列表(A)';
|
|
|
|
|
|
- this.pieSeriesData=this.data.pump_pie
|
|
|
- this.pieOptions = this.getPieOptions()
|
|
|
+ this.pieSeriesData=this.data.pie_dataA
|
|
|
+ this.pieOptionsA = this.getPieOptions()
|
|
|
|
|
|
- this.barXData=this.data.pump_bar.xData
|
|
|
- this.barSeriesData=this.data.pump_bar.yData
|
|
|
- this.barOptions = this.getBarOptions()
|
|
|
-
|
|
|
+ this.pieSeriesData=this.data.pie_dataB
|
|
|
+ this.pieOptionsB = this.getPieBOptions()
|
|
|
|
|
|
+ this.pieSeriesData=this.data.pie_dataC
|
|
|
+ this.pieOptionsC = this.getPieCOptions()
|
|
|
+
|
|
|
|
|
|
},
|
|
|
|
|
|
+ showTable(name){
|
|
|
+ switch (name) {
|
|
|
+ case 1:
|
|
|
+ this.tableTitle='有效期内设备列表(A)';
|
|
|
+ this.tableA=true;
|
|
|
+ this.tableC=false;
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.tableTitle='已失效(小于15天)设备列表(A)';
|
|
|
+ this.tableA=true;
|
|
|
+ this.tableC=false;
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ this.tableTitle='已维护设备列表(C)';
|
|
|
+ this.tableA=false;
|
|
|
+ this.tableC=true;
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ this.tableTitle='未维护设备列表(C)';
|
|
|
+ this.tableA=false;
|
|
|
+ this.tableC=true;
|
|
|
+ break
|
|
|
+ case 5:
|
|
|
+ this.tableTitle='有效使用(大于45天)设备列表(B)';
|
|
|
+ this.tableA=true;
|
|
|
+ this.tableC=false;
|
|
|
+ break
|
|
|
+ case 6:
|
|
|
+ this.tableTitle='警告失效(15天~45天)设备列表(B)';
|
|
|
+ this.tableA=true;
|
|
|
+ this.tableC=false;
|
|
|
+ break
|
|
|
+ case 7:
|
|
|
+ this.tableTitle='失效(0~15天)设备列表(B)';
|
|
|
+ this.tableA=true;
|
|
|
+ this.tableC=false;
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
|
|
|
getDepartOptions() {
|
|
|
@@ -138,45 +245,50 @@ export default {
|
|
|
this.checkedDepart = []
|
|
|
this.handleSearch()
|
|
|
},
|
|
|
- getBarOptions(){
|
|
|
- return {
|
|
|
- title: {
|
|
|
- text: "液压泵告警统计",
|
|
|
+
|
|
|
+ getPieOptions(){
|
|
|
+ return {
|
|
|
+ color:['#91cc75', '#94a6b7'],
|
|
|
+ title: {
|
|
|
+ text: "表A",
|
|
|
textStyle: {
|
|
|
color: '#80a0b0',
|
|
|
fontSize: 16,
|
|
|
fontWeight: 600
|
|
|
}
|
|
|
},
|
|
|
- legend: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- data: this.barXData
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- name: "设备数量",
|
|
|
- nameTextStyle: {
|
|
|
- color: '#80a0b0',
|
|
|
+ tooltip: {
|
|
|
+ formatter: '数量<br/>{b0}：{c0}'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: "pie",
|
|
|
+ center: 'center',
|
|
|
+ radius: [0, '50%'],
|
|
|
+ data: this.pieSeriesData,
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
},
|
|
|
- minInterval: 1
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'inside'
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [{
|
|
|
- name: "设备数量",
|
|
|
- type: "bar",
|
|
|
- barMaxWidth: '40',
|
|
|
- data: this.barSeriesData
|
|
|
- }]
|
|
|
- }
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ }]
|
|
|
+ }
|
|
|
},
|
|
|
- getPieOptions(){
|
|
|
+ getPieBOptions(){
|
|
|
return {
|
|
|
-
|
|
|
+ color:['#91cc75', '#1890ff', '#94a6b7'],
|
|
|
+ title: {
|
|
|
+ text: "表B",
|
|
|
+ textStyle: {
|
|
|
+ color: '#80a0b0',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 600
|
|
|
+ }
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
formatter: '设备数量<br/>{b0}：{c0}'
|
|
|
},
|
|
|
@@ -189,29 +301,48 @@ export default {
|
|
|
radius: [0, '50%'],
|
|
|
data: this.pieSeriesData,
|
|
|
labelLine: {
|
|
|
- smooth: 0.2,
|
|
|
- length: 5,
|
|
|
- length2: 5
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
},
|
|
|
}]
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
|
- if (columnIndex === 0) {
|
|
|
- if (rowIndex % 4 === 0) {
|
|
|
- return {
|
|
|
- rowspan: 4,
|
|
|
- colspan: 1
|
|
|
- };
|
|
|
- } else {
|
|
|
- return {
|
|
|
- rowspan: 0,
|
|
|
- colspan: 0
|
|
|
- };
|
|
|
- }
|
|
|
+ getPieCOptions(){
|
|
|
+ return {
|
|
|
+ color:['#91cc75', '#94a6b7'],
|
|
|
+ title: {
|
|
|
+ text: "表C",
|
|
|
+ textStyle: {
|
|
|
+ color: '#80a0b0',
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 600
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: '数量<br/>{b0}：{c0}'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: "pie",
|
|
|
+ center: 'center',
|
|
|
+ radius: [0, '50%'],
|
|
|
+ data: this.pieSeriesData,
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ }]
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
|
|
|
|
|
|
},
|
|
|
@@ -240,6 +371,7 @@ export default {
|
|
|
height: 40px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
@@ -248,4 +380,76 @@ export default {
|
|
|
.filter-container{
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
+.pie-left-content{
|
|
|
+ width:25%;
|
|
|
+ height:100%;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.pie-right-content{
|
|
|
+ width:25%;
|
|
|
+ height:100%;
|
|
|
+ float: left;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.content-item-head{
|
|
|
+ // width:40%;
|
|
|
+ width:240px;
|
|
|
+ margin-top:30px;
|
|
|
+ background-color:#1d5d99;
|
|
|
+ color: #FFF;
|
|
|
+ height:30px;
|
|
|
+ padding-left:10px;
|
|
|
+ line-height:30px;
|
|
|
+}
|
|
|
+.triangle{
|
|
|
+ float: right;
|
|
|
+ margin-right:-30px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border:15px solid transparent;
|
|
|
+ border-left-color:#1d5d99;
|
|
|
+}
|
|
|
+.content-item{
|
|
|
+ width:240px;
|
|
|
+ height:26px;
|
|
|
+ margin-top:30px;
|
|
|
+ padding:0px 10px;
|
|
|
+ line-height:26px;
|
|
|
+
|
|
|
+ color: #FFF;
|
|
|
+}
|
|
|
+.bg-color1{
|
|
|
+ background-color:#91cc75;
|
|
|
+}
|
|
|
+.bg-color2{
|
|
|
+ background-color:#1890ff;
|
|
|
+}
|
|
|
+.bg-color3{
|
|
|
+ background-color:#94a6b7;
|
|
|
+}
|
|
|
+.triangle2{
|
|
|
+ float: right;
|
|
|
+ margin-right:-36px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border:13px solid transparent;
|
|
|
+ border-left-color:#91cc75;
|
|
|
+}
|
|
|
+.triangle3{
|
|
|
+ float: right;
|
|
|
+ margin-right:-36px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border:13px solid transparent;
|
|
|
+ border-left-color:#1890ff;
|
|
|
+}
|
|
|
+.triangle4{
|
|
|
+ float: right;
|
|
|
+ margin-right:-36px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border:13px solid transparent;
|
|
|
+ border-left-color:#94a6b7;
|
|
|
+}
|
|
|
</style>
|
tongshanglei