|
@@ -0,0 +1,225 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="app-container">
|
|
|
|
|
+ <el-row :gutter="12">
|
|
|
|
|
+ <el-col :span="24">
|
|
|
|
|
+ <div class="filter-container">
|
|
|
|
|
+ <el-cascader
|
|
|
|
|
+ class="filter-item fl form-search-input"
|
|
|
|
|
+ @change="handleSearch"
|
|
|
|
|
+ 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-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">
|
|
|
|
|
+ <base-bar :options="barOptions" width="100%" height="100%" />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </normal-card>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 表格 -->
|
|
|
|
|
+ <div class="datatable">
|
|
|
|
|
+ <div class="table-title">风场液压泵列表</div>
|
|
|
|
|
+ <el-table :data="tableData" row-key="id" fit border width="100%" >
|
|
|
|
|
+
|
|
|
|
|
+ <el-table-column label="风场名称" prop="name" align="center" fixed="left"/>
|
|
|
|
|
+ <el-table-column label="液压泵总数" prop="total" align="center" />
|
|
|
|
|
+ <el-table-column label="液压泵在线数" prop="online" align="center" />
|
|
|
|
|
+ <el-table-column label="液压泵离线数" prop="offline" align="center" />
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script>
|
|
|
|
|
+import NormalCard from '@/components/Card/NormalCard';
|
|
|
|
|
+
|
|
|
|
|
+import BaseBar from "@/components/Charts/BaseBarChart";
|
|
|
|
|
+
|
|
|
|
|
+import { getChinaAreaName } from '@/utils/common'
|
|
|
|
|
+import formOperate from "@/layout/rl-list-operate/rlListOperate";
|
|
|
|
|
+export default {
|
|
|
|
|
+ mixins: [formOperate],
|
|
|
|
|
+ name:'total_windCount',
|
|
|
|
|
+ components: { NormalCard, BaseBar },
|
|
|
|
|
+ filters: {
|
|
|
|
|
+ getChinaAreaName: getChinaAreaName
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ url: "report/windCount",
|
|
|
|
|
+ data: [],
|
|
|
|
|
+ tableData: [],
|
|
|
|
|
+ // 图形配置
|
|
|
|
|
+ barXData: [],
|
|
|
|
|
+ barSeriesData: [],
|
|
|
|
|
+ barOptions: {},
|
|
|
|
|
+
|
|
|
|
|
+ departments: [],
|
|
|
|
|
+ queryParam:{
|
|
|
|
|
+ depart_id:'',
|
|
|
|
|
+ creator:'',
|
|
|
|
|
+ },
|
|
|
|
|
+ departProps: {
|
|
|
|
|
+ label: "department_name",
|
|
|
|
|
+ value: "id",
|
|
|
|
|
+ checkStrictly: true,
|
|
|
|
|
+ expandTrigger: 'hover'
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ created: function() {
|
|
|
|
|
+
|
|
|
|
|
+ // 获取所属单位
|
|
|
|
|
+ this.getDepartOptions();
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 监听搜索组件中查出的数据
|
|
|
|
|
+ */
|
|
|
|
|
+ afterGetList() {
|
|
|
|
|
+ this.tableData=this.data.list
|
|
|
|
|
+
|
|
|
|
|
+ console.log(this.data)
|
|
|
|
|
+ this.barXData=this.data.xdata
|
|
|
|
|
+ this.barSeriesData=this.data.ydata
|
|
|
|
|
+ this.barOptions = this.getBarOptions()
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ getDepartOptions() {
|
|
|
|
|
+ this.$http.get('departments').then( resp => {
|
|
|
|
|
+ this.departments = resp.data
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 清除过滤器
|
|
|
|
|
+ */
|
|
|
|
|
+ clearFilter() {
|
|
|
|
|
+ this.queryParam = {
|
|
|
|
|
+ device_type: '',
|
|
|
|
|
+ net_state: '',
|
|
|
|
|
+ citys: [],
|
|
|
|
|
+ depart_id: [],
|
|
|
|
|
+ creator: '',
|
|
|
|
|
+ created_at: [],
|
|
|
|
|
+ };
|
|
|
|
|
+ this.checkedDepart = []
|
|
|
|
|
+ this.handleSearch()
|
|
|
|
|
+ },
|
|
|
|
|
+ getBarOptions(){
|
|
|
|
|
+ return {
|
|
|
|
|
+ title: {
|
|
|
|
|
+ text: "风场设备统计",
|
|
|
|
|
+ textStyle: {
|
|
|
|
|
+ color: '#80a0b0',
|
|
|
|
|
+ fontSize: 16,
|
|
|
|
|
+ fontWeight: 600
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ show: true //不显示 柱形名称
|
|
|
|
|
+ },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ data: this.barXData
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ name: "设备数量",
|
|
|
|
|
+ nameTextStyle: {
|
|
|
|
|
+ color: '#80a0b0',
|
|
|
|
|
+ },
|
|
|
|
|
+ minInterval: 1
|
|
|
|
|
+ },
|
|
|
|
|
+ dataZoom: [
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 'inside'
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: "风机",
|
|
|
|
|
+ type: "bar",
|
|
|
|
|
+ barMaxWidth: '40',
|
|
|
|
|
+ data: this.barSeriesData,
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ name: "液压泵",
|
|
|
|
|
+ type: "bar",
|
|
|
|
|
+ barMaxWidth: '40',
|
|
|
|
|
+ data: this.barSeriesData,
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+/** 表格错位问题 */
|
|
|
|
|
+::v-deep .el-table th.gutter {
|
|
|
|
|
+ display:table-cell !important;
|
|
|
|
|
+}
|
|
|
|
|
+.app-container {
|
|
|
|
|
+
|
|
|
|
|
+ .charts {
|
|
|
|
|
+ padding-bottom: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .datatable {
|
|
|
|
|
+ .table-title {
|
|
|
|
|
+ background-color: #edebff;
|
|
|
|
|
+ color: #1890ff;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+.filter-container{
|
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
