<template>
|
<a-card :bordered="false">
|
<!-- table区域-begin -->
|
<split-pane :min-percent="10" :default-percent="17" split="vertical">
|
<template slot="paneL">
|
<div class="organ_tree_ct">
|
<organ-tree ref="orgTree" @on-tree-node-select="onTreeNodeSelect"></organ-tree>
|
</div>
|
</template>
|
<template slot="paneR">
|
<!-- 查询区域 -->
|
<div class="table-page-search-wrapper">
|
<a-form ref="formRef" :form="queryForm" layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="8" :sm="9">
|
<a-form-item label="查询时间">
|
<a-range-picker :value="defaultTime" style="width: 100%" showTime @change="onChange" />
|
</a-form-item>
|
</a-col>
|
<a-col :md="6" :sm="8">
|
<span style="float: left; overflow: hidden" class="table-page-search-submit-buttons">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="resetForm" icon="reload" style="margin-left: 8px">重置</a-button>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<div class="table-content">
|
<div class="left-table-content">
|
<div class="title">卸前准备</div>
|
<a-table
|
class="infoTable"
|
ref="table"
|
size="middle"
|
:rowKey="
|
(record, index) => {
|
return index
|
}
|
"
|
:columns="defaultColumns"
|
:dataSource="dataSource.phrase1"
|
:pagination="false"
|
:loading="loading"
|
>
|
<span slot="action" slot-scope="text, record">
|
<div class="table-progress">
|
<a-progress :showInfo="false" v-show="record.eventCount != '0'" :percent="record.percent" />
|
<span>{{ record.eventCount != '0' ? record.percent + '%' : '' }}</span>
|
</div>
|
</span>
|
</a-table>
|
</div>
|
<div class="right-table-content">
|
<div class="title">卸油过程</div>
|
<a-table
|
class="infoTable"
|
ref="table"
|
size="middle"
|
:rowKey="
|
(record, index) => {
|
return index
|
}
|
"
|
:pagination="false"
|
:columns="defaultColumns"
|
:dataSource="dataSource.phrase2"
|
:loading="loading"
|
>
|
<span slot="action" slot-scope="text, record">
|
<div class="table-progress">
|
<a-progress :showInfo="false" v-show="record.eventCount != '0'" :percent="record.percent" />
|
<span>{{ record.eventCount != '0' ? record.percent + '%' : '' }}</span>
|
</div>
|
</span>
|
</a-table>
|
<div class="title">卸后处理</div>
|
<a-table
|
ref="table"
|
size="middle"
|
class="infoTable"
|
:rowKey="
|
(record, index) => {
|
return index
|
}
|
"
|
:pagination="false"
|
:columns="defaultColumns"
|
:dataSource="dataSource.phrase3"
|
:loading="loading"
|
>
|
<span slot="action" slot-scope="text, record">
|
<div class="table-progress">
|
<a-progress :showInfo="false" v-show="record.eventCount != '0'" :percent="record.percent" />
|
<span>{{ record.eventCount != '0' ? record.percent + '%' : '' }}</span>
|
</div>
|
</span>
|
</a-table>
|
</div>
|
</div>
|
</template>
|
</split-pane>
|
<!-- table区域-end -->
|
</a-card>
|
</template>
|
|
<script>
|
// import { JeecgListMixin } from '@tievd/cube-block/lib/mixins/JeecgListMixin'
|
import OrganTree from '../tools/OrganTree'
|
import { getAction } from '@tievd/cube-block/lib/api/manage'
|
import splitPane from 'vue-splitpane'
|
import moment from 'moment'
|
export default {
|
name: 'SysAlgorithmItemList',
|
// mixins: [JeecgListMixin],
|
components: {
|
OrganTree,
|
splitPane,
|
},
|
|
data() {
|
return {
|
description: '执行规范',
|
// 表头
|
|
// 年月
|
month_time: '',
|
monthFormat: 'YYYY/MM',
|
queryForm: {},
|
defaultTime: [],
|
loading: false,
|
dataSource: {
|
phrase1: [],
|
phrase2: [],
|
phrase3: [],
|
},
|
// 列定义
|
defaultColumns: [
|
{
|
title: '检测内容',
|
align: 'center',
|
dataIndex: 'algorithmName',
|
},
|
{
|
title: '异常次数',
|
align: 'center',
|
dataIndex: 'eventCount',
|
},
|
{
|
title: '百分比',
|
width: 250,
|
align: 'center',
|
scopedSlots: { customRender: 'action' },
|
},
|
],
|
url: {
|
list: '/jyz/oiloutEvent/oilOutStatis',
|
},
|
}
|
},
|
|
methods: {
|
moment,
|
// 监听时间
|
onChange(date, dateString) {
|
this.defaultTime = dateString
|
this.queryForm.startTime = dateString[0]
|
this.queryForm.endTime = dateString[1]
|
},
|
onTreeNodeSelect(id, node) {
|
this.queryForm.orgCode = node.selectedNodes[0].data.props.orgCode
|
console.log(id, this.queryForm.orgCode)
|
this.initPage()
|
},
|
searchQuery(data) {
|
console.log(data)
|
this.initPage()
|
},
|
initPage() {
|
this.loading = true
|
getAction(this.url.list, this.queryForm).then((res) => {
|
if (res.code === 200) {
|
this.dataSource = res.result
|
}
|
this.loading = false
|
})
|
},
|
resetForm() {
|
this.defaultTime = []
|
this.queryForm = {}
|
const { key } = this.$refs.orgTree.defaultFirstData
|
this.$set(this.$refs.orgTree.selectedKeys, 0, key) //默认第一个
|
this.initPage()
|
},
|
},
|
|
created() {
|
this.initPage()
|
},
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
.font-title {
|
margin-right: 50px;
|
font-weight: bold;
|
}
|
.organ_tree_ct {
|
height: 76vh;
|
}
|
.year-month {
|
margin-right: 50px;
|
}
|
.ant-alert-info {
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
.table-content {
|
display: flex;
|
justify-content: space-between;
|
.title {
|
font-size: 20px;
|
margin: 20px 0;
|
text-align: center;
|
font-weight: bolder;
|
}
|
.left-table-content {
|
width: 48%;
|
}
|
.right-table-content {
|
width: 48%;
|
}
|
.table-progress {
|
width: 70%;
|
margin: auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
span {
|
display: inline-block;
|
width: 50px;
|
margin: 3px 0 0 5px;
|
}
|
}
|
}
|
</style>
|
